表单是页面跟用户交互的区域的集合;
表单包括表单域、表单控件(元素)、提示信息;
表单域是包含元素的区域,用<form>定义,会把表单域的元素信息提交给服务器;
常用的属性如下:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收表单元素的服务器程序地址 |
method | get/post | 提交方式 |
name | 名称 | 指定表单域名称,用于区分 |
表单控件标签比较多,现阶段先了解3个:
1、<input>标签用于收集用户信息,可单标签使用,其中type属性表示控件类型,比较多,可以看如下:
属性指 | 描述 |
---|---|
button | 定义可点击的按钮,一般用js脚本来启动 |
checkbox | 复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式的提交按钮 |
password | 密码字段,会被掩码 |
radio | 单选按钮 |
reset | 重置按钮,清空表单中的所有数据 |
submit | 提交按钮,将表单信息提交给服务器 |
text | 单行的输入字段,默认宽度是20字符 |
<input>其他的属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 自定义 | 定义input元素的名称,用于区分 |
value | 自定义 | 规定input元素的值,一般用于输入字段的控件初始文本 |
checked | checked | 规定input元素首次加载时被选中,主要针对选择按钮 |
maxlength | 正整数 | 输入字段的最大长度 |
另外为了更好的用户体验,经常搭配<label>使用,
<label>标签是绑定一个表单元素,相当于表单元素的点击范围扩大到<label>标签范围
用for属性跟<input>的id属性进行绑定,用法如下:
<label for="name">文本1</label><input type="radio" name="sex" id="name">
这样子点击文本1的部位,也可以触发radio控件
2、下拉列表标签<select>:
拉下选项的标签<option>,可以添加一个属性selected,值为selected表示默认选中
3、文本域标签<textarea>:
当用户输入的文本较多时,不宜用inptu标签中的text控件,不方便展示
这时就可以用<textarea>标签