form标签
-
定义
form标签是一个用于存储表单元素的区域;
form只是一个大的区域,里面提供数据输入和采集的是很多表单控件元素完成的。
-
写法
<form action="地址" method="get" target="_blank" name="表单名"> <!-- 各种表单控件元素 --> </form>
action标签属性 --- 表单提交时,应该往哪个地址提交
method标签属性 --- 表单提交数据的方式,一般有两种 get 和 post
target标签属性 --- 提交数据后,后端返回的新页面在哪里打开,取值和a里面的target一样
name标签属性 --- 表单名
entype 标签属性 --- 设置编码格式
-
默认
application/x-www-form-urlencoded
-
上传文件设置
multipart/form-data
-
表单控件
表单控件的作用是采集用户的数据然后提交到后端,所以所有的控件都必须有name及value属性,并且除了单选和多选之外,所有的控件name都不能相同。
-
input
input元素是个单标签,它的标签属性type的不同,可以使它的意义不同:
<!-- case 1 : 单行文本输入框 value属性为输入的内容,所以可以不写 --> <input type="text" name="名字" placeholder="这里可以写提示文字" /> <!-- case 2 : 单行密码输入框 value属性为输入的内容,所以可以不写 --> <input type="password" name="名字" /> <!-- case 3 : 单选按钮,一组选项name必须相同,value必须不同(value值随便定义),一般需要后面写文字辅助选择 --> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="radio" name="Country" value="0" />中国 <input type="radio" name="Country" value="1" />美国 <input type="radio" name="Country" value="2" />日本 <input type="radio" name="Country" value="3" />其他 <!-- case 4 : 多项选择 name建议相同,传值时是所有选中项的value集合 --> <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="网球" />网球 <!-- case 5 : 重置按钮,点击重置所有表单中所有的控件,按钮文字默认"重置",可以定义value改变文字显示 --> <input type="reset" /> <!-- case 6 : 空按钮,没有任何功能的空按钮,需要设置value值以供显示,一般用于js添加功能事件 --> <input type="button" value="按钮" /> <!--或者--> <button>按钮</button> <!-- case 7 : 上传文件 --> <input type="file" name="f" /> <!-- case 8 : 隐藏不显示的表单控件,用来传递附带的不需要向用户展示的信息 --> <input type="hidden" name="hide" value="1" /> <!-- case 9 : 提交,点击之后提交该表单form的数据,默认value是"提交" --> <input type="submit" />
-
css3新增
input
<input type="number" /> <!-- 数字输入框 min 数字的最小值 max 数字最大值 step倍数--> <input type="range" /> <!-- 数字滑块 min 数字的最小值 max 数字最大值 step倍数--> <input type="time" /> 时间 <input type="date" /> 年月日 <input type="month" /> 年月 <input type="week" /> 年周 <input type="color" /> 颜色
-
label
辅助input进行选择。
当我们进行单选或者多选时,必须点击input本身才可以选择,因为后面的文字只是一个视觉的辅助作用。我们可以通过给文字加上label标签然后将文字和input关联起来。
label的for属性与input的id属性对应,例如:
<input type="radio" name="sex" value="1" id="sex1" /><label for="sex1">男</label> <input type="radio" name="sex" value="2" id="sex2" /><label for="sex2">女</label>
-
默认选中,禁止使用
默认选择:
checked
标签属性,单选或多选时,可以指定初始默认的已被选中的项禁止使用:
disabled
标签属性,规定input禁止使用 -
下拉选框
select 和 option配合实现下拉选框
<!-- name规定给select value规定给option并且不能相同 --> <select name="days"> <option value="none">---请选择星期---</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> <option value="6">星期六</option> <option value="0">星期日</option> </select>
size标签属性,设置给select,规定select下拉时最多能显示几个;
selected标签属性,设置给option,规定默认显示哪个option。
-
文本域 textarea
多行文本输入框,rows标签属性定义高度,cols标签属性定义宽度;
如果需要用来传值,同样的需要制定name属性。
-
表单控件分组
fieldset 和 legend配合将多个表单控件根据需要分组;
fieldset分组,legend定义组标题。
<form action="" medthod="" name=""> <fieldset> <legend>注册信息</legend> 用户名:<input type="text" name="user" /> 密 码:<input type="text" name="pwd" /> </fieldset> <fieldset> <legend>个人信息</legend> 姓名:<input type="text" name="name" /> 年龄:<input type="text" name="age" /> 性别:<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女 </fieldset> </form>