# from表单
使用<form>标签来实现表单的创建。
form相比是一个表单的容器标签，其他表单标签需要在它的范围内才有效。
<form method="post" action="xxx.html">
<!-- 省略 -->
</form>
2
3
解释： 创建一个表单容器，method提交方式为post，action提交地址是xxx.html
# 表单元素及其格式
<input>
input标签中有很多属性，下面对一些比较常用的属性进行整理。
| 属性 | 说明 |
|---|---|
| type | 此属性制定表单元素的类型，可用的类型有text，password，checkbox，radio，submit，reset，file，email，number，url，hidden，image，button。默认为text |
| name | 此属性指定表单元素的名称。例如，如果表单上有几个文本框，则可以按名称来标识它们 |
| value | 此属性是可选属性，它指定表单元素的初始值。如果type为radio类型，则必须指定一个值 |
| size | 此属性指定表单元素的初始宽度。如果type为text或password类型，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位。 |
| maxlength | 此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大 |
| checked | 此属性用于指定按钮是否被选中的。当输入类型为radio或checkbox时，使用此属性 |
# 文本框
<input type="text" value="初始值" name="名称" size="宽度" maxlength="限字符数"/>
# 密码框
<input type="password" value="初始值" name="名称" size="宽度" maxlength="限字符数"/>
# 单选按钮
<input name="gen" type="radio" value="男" /> 男
<input name="gen" type="radio" value="女" /> 女
2
如果希望初始默认的选项，那么可以使用checked属性。
<input name="gen" type="radio" value="男" checked /> 男
<input name="gen" type="radio" value="女" /> 女
2
# 复选框
<input type="checkbox" name="interest" value="sports" />运动
<input type="checkbox" name="interest" value="talk" />聊天
<input type="checkbox" name="interest" value="play" />玩游戏
2
3
如果希望初始默认的选项，那么可以添加checked属性。
# 列表框
<select name="指定列表名称" size="行数">
<option value="可提交的值" selected="selected">显示字符</option>
<option value="可提交的值">显示字符2</option>
</select>
2
3
4
size设置的行数如果为1是，即变成组合框。
# 按钮
reset 重置按钮
submit 提交按钮
button 普通按钮
如果是普通按钮需要设置一个onclick事件
<input type="button" name"butButton" value="button 按钮" onclick="alert(this.value)" />
//新页面打开
<input type=button onclick="window.open('1.jsp')">
//本页面打开
<input type=button onclick="window.location.href='1.jsp'">
image 图片按钮
<input type="image" src="login.gif" />
2
3
4
5
6
7
# 多行文本域
<textarea name="textarea" cols="显示的列数" rows="显示的行数">
自然、活泼、善于思考....
</textarea>
2
3
其中cols属性用来指定多行文本框的列的宽度rows属性用来指定多行文本框的行数。
在textarea标签中不能使用value属性来赋初始值
# 文件域
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" /><br/>
<input type="submit" name="upload" value="上传" /></p>
</form>
2
3
4
文件域在不同的浏览器中显示的效果不一样。
可以用CSS统一效果。
使用文件域必须在表单中添加enctype编码属性为multipart/form-data，标识将表单数据分为多部分提交。
# 邮箱
<input type="email" name="email" />
# 网址文本框
<input type="url" name="userUrl" />
网址文本框，输入错误的网址会提示错误。
# 数字文本框
<input type="number" name="userNum" min="0" max="100" step="10" />
| 属性 | 说明 |
|---|---|
| value | 规定的默认值 |
| min | 规定允许的最小值 |
| max | 规定允许的最大值 |
| step | 规定合法的数字间隔(如果step="2"，则合法的数是-2、0、2、4等) |
# 滑块调节数
<input type="range" name="rangel" min="0" max="10" step="2" />
# 搜索框
<input type="search" name="sousuo" />
<input type="submit" value="Go" />
2
# 表单的隐藏域
<input type="hidden" value="666" name="userid" />
提交方式get能够在地址栏中查看到提交的信息。
# 表单的只读与禁用设置
readonly 只读属性
disabled 禁止属性
<input type="text" name="text" value="张三" readonly />
<input type="text" name="text2" value="张三" disabled />
2
# 表单元素的标注(关联)
label使用for属性来指定当鼠标单击标注文本时，焦点对应的表单元素。
Demo： 请选择性别
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
2
3
4
# 表单初级验证的方法
# 提示文本
placeholder
placeholder 属性用于为 input 类型的文本框提供一种提示文本(hint)，这种提示可以描述文本框期待用户输入的规范，在输入为空时提示，可以作用于input标签中的text、serch、url、email和password等等类型。
用户名:<input type="text" name="userText" placeholder="用户名不能为空" />
# 不允许为空
required
限制input标签中的类型输入内容不能为空，否则不允许用户提交表单。
用户名:<input type="text" name="userText" required />
# 验证input标签自定义规则
pattern
pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。
用户输入的内容必须符合正则表达式所指的规则，否则不允许提交表单。
正则表达式是JavaScript中的内容。
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
<input type="submit" value="提交"/>
2