Html5—表单

第三章 表单

3.1表单元素

3.1.1表单格式

      <!-- action:表单向何处发送method:get/post, 表单提交方式get:比较快，当不安全post:安全，比较慢
-->格式：
<form action="#" method="get"><!-- type:text文本 value:input的值name:input的名称--><input type="text"><input name="pass" type="password" >密码<input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填“/> <!-- maxlength:文本框最多输入多少字符size:文本框长度 --><input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />                                                                                                              
</form>

3.1.2表格元素格式

属性	说明
type	指定元素的类型，text /password/checkbox/radio/submit/reset/file/hiddle/image/button 默认为text
name	指定表单的元素名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type 为text或者password时表单元素大小以字符为单位，其他类型时宽度以像素为单位
maxlenght	type为text/passward时输入的最大字符数
checked	type为radio/checkbox时，指定按钮是否被选中

3.1.3元素属性

 maxlength:最大长度   minlength:最小长度   size:大小<input type="text" maxlength="20" minlength="10" size="">------------------------------------------------------------maxlength:最大长度   minlength:最小长度   size:大小<input type="passward" maxlength="20" minlength="10" size="">------------------------------------------------------------radio:单选按钮，name属性一组要一致，checked:默认选中
<input type="radio" name="sex" id="" value="1"  checked/>
<input type="radio" name="sex" id="" value="2" />------------------------------------------------------------
checkbox:复选框 ，name组属性要一致，checked:默认选中
<input type="checkbox" name="sports" id="" value="" />篮球
<input type="checkbox" name="sports" id="" value="" />足球
----------------------------------------------------------reset:重置按钮，value:改变按钮文字
<input type="reset" name="" id="" value="1" />按钮1----------------------------------------------------------
submit:提交，value：改变按钮文字
<input type="submit" name="" id="" value="提交按钮" />-----------------------------------------------------------
image:图片按钮，src：图片路径
<input type="image" src="img/book.jpg" />
----------------------------------------------------------
button：普通按钮。value:改变按钮文字
<input type="button" name="" id="" value="普通按钮" />
------------------------------------------------------------file:文件域，需要在form中添加 enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">...<input type="submit" value=""/>
</form>
------------------------------------------------------------email:邮箱	
<input type="email" name="" id="" value="" />---------------------------------------------------------url:网址,会自动验证URL地址格式是否正确
<input type="url" name="" id="" value="" />-----------------------------------------------------------number:数字，maxz:最大值，min:最小值 value:默认值  step:步长
<input type="number" name="" max="8" min="2" value="5" step="2"/>-----------------------------------------------------------range:滑块， max:最大值 min:最小值 value:默认值  step:步长
<input type="range" name="" value="" step="2"/>-----------------------------------------------------------search:搜索框
<input type="search" name="" id="" value="" />----------------------------------------------------------hidden:隐藏域	
<input type="hidden" name="userid" id="1" value="132" />---------------------------------------------------------
readonly:只读<input type="text" name="" id="" value="" readonly/>---------------------------------------------------------disabled:禁用
<input type="text" name="" id="" value="" disabled/>

3.1.4元素标注

label:标签
在标签中使用for属性，for的属性值要与表单中的id属性值一致

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

3.1.5 表单初级验证

placeholder:文本框输入内容提示

required:必填项

pattern:验证规则，正则表达式

placeholder:文本框输入内容提示
<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
------------------------------------------------------------
required:必填项
<input type="text" name="username"  required/>
------------------------------------------------------------
pattern:验证规则，正则表达式
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />