常用表单元素及属性
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>