1.表单的基本结构
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p><input type="submit" name="button" value="提交"/></p>
<p><input type="submit" name="button" value="提交"/></p>
</form>
2.表单的元素
<input type="" name="" value=""/>
|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | **type为text或password时，输入的最大字符数 |
| checked | **type为radio或checkbox**时，**指定按钮是否是被选中 |
3.文本框
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
size长度 maxlength可输入最多字符
4.密码框
<input type="password" name="pass" size="30" maxlength="20" />
5.单选按钮
input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
6.复选框
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
7.文件域
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
8.按钮
<input type="button" name="butButton" value="button按钮"/>
<input type="submit" name="butSubmit" value="submit按钮">
<input type="reset" name="butReset" value="reset按钮">
<input type="image" src="images/login.gif" />
9.邮箱
<p>邮箱:<input type="email" name="email"/></p>
10网址
<p>请输入你的网址:<input type="url" name="userURL"/></p>
<input type="submit"/>
11.数字
<p>请输入数字:<input type="number" min="0" max="100" step="10" name="num"/></p>
<input type="submit"/>
step合法的数字间隔
12.滑块
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>
13.搜索框
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
<input type="submit"/>
14.下拉列表框
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">...</option >
<option value="选项的值">...</option >
</select>
15.多行文本域
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
16表单的高级应用
隐藏域 <input type="hidden" value="666" name="userid">
只读属性 readonly <input name="name" type="text" value="张三" readonly>
禁用属性disable <input type="submit " disabled value="保存" >
17.表单的标注
增强鼠标的可用性，自动将焦点转移到与该标注相关的表单元素上
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
18.表单的初级验证
placeholder
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
required
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
pattern
必须符合正则表达式