常用表单元素及属性

常用表单元素及属性

1.表单元素使用<form action=””method=””></form>标签包裹
	action === 提交表单的服务器的地址
	method === 提交表单的方式（post/get）
		post与get的区别：
			1.	get是从服务器获取数据，post是向服务器传送数据
			2.	get（不加密）是把表单数据提交到表单action提供的url中，在浏览器的url栏中可以看到表单中所有的数据信息；post（加密）是通过HTTPpost机制将表单数据放到HTML HEADER内一起传到action提供的url中，用户在在浏览器的url栏中看不到表单中的数据信息。
			3.	对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
			4.	对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
			5.	get安全性非常低，post安全性较高。一般建议使用post方式。
	


2.表单类型
输入文本框 === text
单选框 === radio（使用单选框时将name的值设置成一样使选项之间产生互斥，比如性别）
多选框 === checkbox
密码框 === password
按钮 === button
按钮（双标签）=== button（在form表单里面有默认提交功能，但是在表单外面就只是纯普通按钮的功能; 若想在表单中消除提交功能，给标签添加属性type=”button”即可）
提交 === submit
重置 === reset
下拉列表（双标签） === select
列表项(双标签) === option
<label for="dizhi">地址</label>
<select name="dizhi" id="dizhi">
    <option value="1">高新区</option><!--value为数字，最好不用中文-->
    <option value="2">双流区</option>
    <option value="3" selected>武侯区</option>
</select>
文本域/多行文本（双标签）=== textarea
输入包含数字值的字段 === number (可以通过min 和 max属性设置输入的数字范围)
用于应该包含颜色的输入字段 === color（会自动跳出颜色选择器）
包含一定范围内的值的输入字段 === range（min和max的属性值范围以滑块的方式展现）
选择月份和年份 === month（会出现日期选择器）
选择周和年 === week
选择时间（无时区）=== time
选择日期和时间（无时区） === datetime-local
包含电子邮件地址的输入字段 === email
选择文件 === file
定义图像形式的提交按钮  === image
<input type="image" id="img" name="img" src="" alt=""><!--法一：容易出错，不建议使用-->
<img src="" alt="" οnclick="return dosubmit();"><!--法二-->

3.关联标签
<!--显示关联：通过label的for属性关联指定的元素，关联的元素在label标签之外，点击label标签内的内容就会使关联的元素或控件获得焦点，触发绑定元素或控件-->
<!--点击lable内容使关联的元素获得焦点,触发相关联的控件-->
<!--lable标签中的for属性值与相关联的控件的id属性值相同-->
<label for=""></label>

<label for="man">男</label><input type="radio" id="man" name="sex" value="man">
<label for="woman">女</label><input type="radio" id="woman" name="sex" value="woman">

<!--隐式关联：把需要绑定的标签或元素或控件放到label内部，让label标签包裹需要绑定标签或元素或控件。这样就不用通过for属性绑定元素了。-->
<label>
	男<input type="radio" id="man" name="sex" value="man">
</label>
<label>
	女<input type="radio" id="woman" name="sex" value="woman">
</label>




4.属性（布尔值属性一般不用写值）
autofocus === 自动获取焦点（光标焦点），布尔属性
placeholder === 输入框中的提示语
value === input框中的默认值，value值传到服务器
max === 输入的字段的最大值
min === 输入的字段的最小值
maxlength === 输入的最大字符数，无论汉字、英文、阿拉伯数字在这里均默认一个占一个字符
checked === 复选框默认被选中，布尔属性
name === 使表单数据之间产生联系，在写表单的时候一定要加上name属性，若是使用get方式提交后可以看到地址栏上会出现“name名=value值& name名=value值…”
selected === 默认选中的下拉列表项, 布尔属性
disabled === 禁用，无法输入和编辑内容， 布尔属性
autocomplete === 规定输入字段是否应该启动自动完成功能（属性值on:默认启动；off:关闭；  自动完成提示是浏览器基于之前键入过值。）
readonly === 是否可修改该字段的值
required === 必须输入该字段的值才能提交表单
pattern === 使用正则表达式验证输入的字段模式（属性值为正则表达式）



基本表单元素集合
<form action="" method="get" >
    <h1>输入文本框</h1>
    <label for="userName">用户输入框</label>
    <input type="text" id="userName" name="user" placeholder="请输入用户名" autocomplete="off">
    <input type="text" id="information" name="info" disabled>

    <h1>密码框</h1>
    <label for="code">密码框</label>
    <input type="password" id="code" name="pwd" autofocus maxlength="8">

    <h1>单选框</h1>
    <input type="radio" id="man" name="sex" value="man">
    <label for="man">男</label>
    <input type="radio" id="woman" name="sex" value="woman">
    <label for="woman">女</label>

    <h1>复选框</h1>
    <input type="checkbox" id="dance" value="跳舞" name="dance" checked>
    <label for="dance">跳舞</label>
    <input type="checkbox" id="read" value="看书" name="read">
    <label for="read">看书</label>
    <input type="checkbox" id="sing" value="唱歌" name="sing">
    <label for="sing">唱歌</label>
    <input type="checkbox" id="jumping" value="跳绳" name="jumping">
    <label for="jumping">跳绳</label>

    <h1>下拉列表</h1>
    <label for="dizhi">地址</label>
    <select name="dizhi" id="dizhi">
        <option value="1">双流区</option>
        <option value="2">高新区</option>
        <option value="3" selected>武侯区</option>
    </select>

    <h1>文本域</h1>
    <textarea name="duohan" id="" cols="30" rows="10">
        jckajkfmdkasmfkmwksfmkejmfkesjdfkdjsfaskjfk
    </textarea>

    <h1>按钮</h1>
    <input type="button" name="" value="普通按钮">
    <input type="submit" name="" value="提交按钮">
    <input type="reset" name="" value="重置按钮">
    <button type="button">普通按钮</button>
    <button>提交</button><!--具有提交功能-->
	
    <h1>日期：年月日选择</h1>
    <input type="date" id="ymd" name="ymd">

    <h1>年月日时分选择</h1>
    <input type="datetime-local" id="ymdhm" name="ymdhm">

    <h1>邮件</h1>
    <input type="email" id="email" name="email">

    <h1>选择文件</h1>
    <input type="file" id="file" name="file">
    
    <h1 id="myanchor">定义图片形式的提交按钮</h1>
    <input type="image" id="img" name="img" src="" alt=""><!--法一：容易出错，不建议使用-->
<img src="" alt="" οnclick="return dosubmit();"><!--法二-->
</form>