单选框、复选框和下拉框.pptx

主讲人：李阳HTML5网页设计单选框、复选框和下拉框 单选按钮下拉框示例如果所有的信息填写都用输入框，增加了用户的交互难度，所以需要单选按钮、复选框和下拉按钮来简化用户操作。 一、单选按钮input type =radio name=名称 value = checked= checked /说 明用 checked 属性表示缺省已选的选项：input type=“radio” name=“fruit” value = “Orange” checked 桔子。桔子选项将默认为选中状态。 一、单选按钮body 请选择你喜欢的水果：br form input type=radio name=fruit value=Apple“ / 苹果 br input type=radio name=fruit value=Orange“ / 桔子 br input type=radio name=fruit value=Mango“ / 芒果 br input type=submit value= 提交 /form/body示例代码 一、单选按钮示例代码 二、复选框input type =checkbox name=名称 checked= checked /说 明用 checked 属性表示缺省已选的选项，写法是：input type=checkbox name=fruit value =orange checked桔子。桔子选项将默认为选中状态。 二、复选框示例代码body 请选择你喜欢的水果：br form input type=checkbox name=fruit value=apple“ / 苹果 br input type=checkbox name=fruit value=orange 桔子 br input type=checkbox name=fruit value=mango 芒果 br input type=submit value= 提交 /form/body 二、复选框 三、下拉框下拉框主要可以使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中，在有多种选项可供用户滚动查看时，size 属性确定列表中可同时看到的行数；selected 属性表示该选项在默认情况下是被选中的。textarea name=指定名称 cols=列数 rows=行数 文本域的内容/textarea注意：如果将下拉框变成多选，则添加 muiltiple 属性即可。 三、下拉框body form name=myform action= method=post 生日 : input type=text name=year maxlength=4 / 年 select name=birth option value=-1 选择月份 /option option value=1 一月 /option option value=2 二月 /option ...... /select input type=text name=year maxlength=2 / 日 br/ 省份 : select name=province option value=0 选择省份 /option option value=1 selected=selected 湖北 /option ...... /select /form/body示例代码 三、下拉框 四、思考利用讲解的单选按钮、复选框和下拉框设计一个如下样式的注册网页。