概念理解
一个完整的表单由三部分组成:
表单控件(表单元素)
提示信息
表单域
(1)搜索框/网站注册窗口/网站登录窗口
form---表单域
action---数据处理网址/表单提交的网址
method---提交方式(get-方便,传递数据量小,私密性差/post安全性高,传递数据量大,私密性好)
input---表单项,有很多类型(tupe),设置不同的类型(type)可以实现不同功能
text---文本框
textarea---文本域
submit---提交
name---表单项收集到的数据名称
value--表单项的值,显示在文本框中的提示文本
readonly--只读,文本框中的文字只可读,不可更改
size---文本框的宽度
maxlength---最大字符长度
disabled---禁用
(2)密码框
<input type="password" name="***">
(3)单选按钮
<input type="radio" name="***" value="***">
例:性别:<input type="radio" name="gender" >男
<input type="radio" name="gender" >女
Radio如果是一组,必须给给它们相同的name,则可多个选中其中一个
注:
*单选按钮要求name对应名称一样
*<lable>标记
针对单选按钮及双选按钮,点击文字亦可选中,提高用户体验度,在选择单选按钮时,避免只有点中按钮才能选中的状态。
为input元素定义标注
作用:用于绑定一个表单元素,当点击label标签的时候,被绑定表单元素就会获得输入焦点(提高用户体验)
<label>用户名:<input type=“text”></label>----当鼠标点击用户名时,输入光标自动在文本框中出现
两种写法,配合兼容性问题,二选一:
1.包含所有内容-------<lable><input type="radio" name="gender" value="femal">女</lable>
2.部分包含----- <input type="radio" name="gender" value="femal" id="nv"><lable for="nv">女</lable>
(4)多选按钮(复选框)
<input type="checkbox" name="***" value="***">
Checked=checked 默认被选中(必选项)
(5)上传文件
<input type="file" name="***" >
(6)下拉菜单
<select name="***">
<option value="***"></option>(选项内容填写)
</select>
(7)多行文本
<textarea rows="每行中的字符数" cols="显示的行数" name="***">
文本内容
</textarea>
(8)按钮
提交按钮:<input type="submit" value="提交"/> 提交功能
重置按钮:<input type="reset" value="重置"/> 重置内容
普通按钮:<input type="botton" value="普通"/> 没有功能,可以自定义功能
图片按钮:<input type="image" src="***"/> 提交功能