10.HTML表单元素【上】

第十章 表单元素
一、
??1、<form> ?表示html表单：（单独本事没什么效果，不定义无法提交）
?????????| ?元素名称 ??????
???????（1） action ?： ?表示表单提交的页面； ??????//<form action="http://www.baidu.com">
???????（2） method ?: ??表单的请求方式，有POST和GET两种，默认GET； ?//<form method="get" action="http://www.baidu.com">
???????（3）enctype ?: ??表示浏览器对发送给服务器的数据采用编码格式，有三种；application/x-www-form-urlencoded（默认格式，可不写）
?????????????????????????????????????????????????????????????????????????????multipart/form-data ?????????????（用于上传文件到服务器）
???????（4） ?name ??: ??设置表名单以便调用；
???????（5） target ?: ??超链接，设置提交时的目标位置；_blank/_parent/_self/_top;
???????（6）autocomplete ?:设置浏览器时记住用户输入的数据，默认为on自动完成（一般不用写，系统默认），如果不想自动完成则设为off；
???????（7） novalidate ??：设置是否执行客户端数据有效性检查；
??2、<input> ?表示用来收集用户输入数据的控制：
???????（1）autofocus ?: 让光标聚焦在某个input元素上，让用户输入； ?//<input name="user" autofocus >
???????（2）disabled ?: ?禁用用户输入； ??????//<input name="user" autofocus disabled> ???（html5支持单属性）
???????（3）autocomplete ?: ?单独设置input元素的自动完成功能；
???????（4）form ?: ?让表单外的元素和指定的表单挂钩提交；（在form外的数据与form里提交）
???????????例如、<form method="get" id="register" action="http://www.baidu.com">
???????????????用户名：<input type="" name="user">
???????????????<button>提交</button>
??????????????????<input name="user" autofocus disabled>
??????????????????</form>
??????????????????电子邮件：<input name="emall" form="register">

???????（5）type ?: ?input元素的类型；
???????（6）name ?:定义input元素的名称，以便接收到相应的值；
???????（7）value ：默认起始值；
????????????
??3、<textarea> ?表示可以输入多行文本的控制：
??4、<select> ?表示用来提供一组固定的选项：
??5、<option> ?表示提供一个选项：
??6、<optgroup> ?表示一组相关的option元素：
??7、<button> ?表示用来提交或重置的表单按钮（或一键按钮）：
????????有三个元素
????????（1）、<button type="submit">提交</button>
????????（2）、<button type="reset">重置</button>
????????（3）、<button type="button">按钮</button> ?//没有任何效果，需要配合JavaScript进行处理；
????????（4）、对于type属性为submit时，按钮还会提供额外的属性：
????????????|———————— |——————————————————|
????????????| ??属性名称 ?????| ?????????说明 ?????????????????????|
????????????| ???form ????????| ?????指定按钮关联表单 ?????????????|
????????????| formmaction ????| ?????覆盖form元素的action属性 ?????|
????????????| formenctype ????| ?????覆盖form元素的enctype属性 ????|
????????????| formmethod ?????| ?????覆盖form元素的method属性 ?????|
????????????| formetarget ????| ?????覆盖form元素的target属性 ?????|
????????????| formnovalidate ?| ??????覆盖form元素的novalidate属性 |
????????????|———————— |——————————————————|
???????????????<form method="get" id="register" action="http://www.baidu.com">
???????????????<button type="submit" formaction="http://www.sogou.com">提交</button>
??????????????//这里是在对原地址不删除的情况下，对原地址进行覆盖；
??8、<datalist> ?表示给用户提供的一组建议值：
??9、<fieldset> ?表示一组表单元素：（对于不同内容进行分组，相同的内容会在一个矩形框里，fieldset相当于矩形框）
????????（1~3）、name,form,disabled //（ ?<fieldset disabled> ???） ;
??10、<legend> ??表示fieldset元素的说明性标签：(和上面的连用，在框子上有标签)
?????????例 ??<fieldset>
???????????<legend>注册表单</legend>
??????????????</fieldset>

??11、<label> ?表示表单元素的说明性标签;（光标不仅点击输入框能输入，点击前面的电子邮件光标也会变到输入框里）
????????????????????????????????????????（后期学习的CSS用到，可以通过label进行样式的设置）
?????????例一、<label>
???????????用户名：<input type="" name="user">
???????<button>提交</button>
???????????????</label>
?????????例二、<label>
???????????电子邮件:<input name="emall" form="register">
???????????????</label>
?????????例三、<label for="user">用户名：</label> ???????//如果只想包含用户名，就用例三；
???????????????<input id="user" name="user" autofocus>
??12、<output> ?表示计算结果：