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}" />