11.1 基本使用表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。
11.2 GET&POST表单需要使用表单标签来设置：
<!-- 表单 -->
<form>
input元素
</form>
属性 说明 action 后台地址 method 提交方式GET或POST
GET和POST区别：
1.GET
- 数据会显示在地址栏中，数据不安全
- 数据大小有限制
- 数据通过请求头传递
2.POST
- 数据不会显示在地址栏中，数据安全
- 数据对大小无限制
- 数据通过实体内容传递
<form action="后端接口" method="POST">
<input type="text">
<input type="password">
</form>
11.3 LABEL
使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" id="username">
<label for="password">密码</label>
<input type="password" id="password">
</form>
11.4 INPUT也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。
文本框用于输入单行文本使用，下面是常用属性与示例。
属性 说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型 比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera
11.4.1 基本示例<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>
11.4.2 调用摄像头
当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.
<form action="后端接口" method="POST">
<label for="file">上传文件</label>
<input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>
通过设置表单的type字段可以指定不同的输入内容.
类型 说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮
11.4.4 HIDDEN隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.
<input type="hidden" name="id" value="1">
11.4.5 SUBMIT
创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.
a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.
<input type="submit" name="submit" value="提交表单">
b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.
<button type="submit">提交表单</button>
11.4.6 禁用表单
通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端
<input type="text" value="数据" readonly>
11.4.7 PATTERN
表单可以通过设置pattern属性指定正则验证.
属性 说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件
<form action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
<button>提交表单</button>
</form>
<script>
function validate(message){
alert(message);
}
</script>
11.4.8 TEXTAREA
文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.
属性 说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)
<textarea cols="30" rows="3">请踩踩我......</textarea>
11.4.9 SELECT
下拉列表项可用于多个值中的选择.
属性 说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值
<form action="">
<select multiple size="10">
<option value="">选择课程</option>
<optgroup label="后端">
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">LINUX</option>
</optgroup>
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JAVASCRIPT</option>
</optgroup>
</select>
</form>
单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密 只能选择一个.
属性 说明 checked 选中状态
<form action="">
<input type="radio" name="" id="boy" checked>
<label for="boy">男</label>
<input type="radio" name="" id="girl">
<label for="girl">女</label>
</form>
