HTML表单

表单（Form）

• 表单应用得非常广，在需要跟服务器打交道的地方基本都用到，比如注册、登录、评论基本都用表单
• 表单：是一个包含表单元素的区域
• 表单用 <form> 标签来定义
• 它内部可以放很多表单元素标签

登录表单示例

<form>
    用户名:<input type="text" name="name"/>
    <br/>
    密码:<input type="password" name="pwd"/>
    <br/>
    <input type="button" value="提交"/>
</form>Code language: HTML, XML (xml)

说明

元素	作用
<form>	表单容器，包裹所有表单元素
type="text"	单行文本输入框，用户输入用户名
type="password"	密码输入框，输入内容会显示为圆点/星号
name 属性	提交给服务器时的字段名，服务器靠这个识别数据
type="button"	按钮，value 是按钮上显示的文字

上面示例中 type="button" 只是个普通按钮，点击不会自动提交表单。真正提交需要用 type="submit"，或者后面用 JS 来控制提交

<form> 常用属性

属性	作用	示例
action	表单数据提交到哪个服务器地址	action="login.php"
method	提交方式：get 或 post	method="post"

<form action="login.php" method="post">
    用户名:<input type="text" name="username"/>
    <br/>
    密码:<input type="password" name="password"/>
    <br/>
    <input type="submit" value="登录"/>
</form>Code language: HTML, XML (xml)

get 方式：数据会显示在 URL 地址栏里（适合搜索）

post 方式：数据藏在请求体里，不显示在地址栏（适合登录、注册）

其他表单元素

单选框（Radio）

• 同一组单选框用相同的 name，只能选一个

<input type="radio" name="sex" value="male"/> 男
<input type="radio" name="sex" value="female"/> 女Code language: HTML, XML (xml)

复选框（Checkbox）

• 可以多选，同一组用相同的 name

<input type="checkbox" name="hobby" value="basketball"/> 篮球
<input type="checkbox" name="hobby" value="football"/> 足球
<input type="checkbox" name="hobby" value="swim"/> 游泳Code language: HTML, XML (xml)

下拉框（Select）

• 用 <select> + <option> 实现

<select name="city">
    <option value="gz">广州</option>
    <option value="sh">上海</option>
    <option value="bj">北京</option>
</select>Code language: HTML, XML (xml)

表单元素汇总

类型	type / 标签	作用
文本输入	type="text"	单行文本
密码输入	type="password"	密码（掩码显示）
按钮	type="button"	普通按钮
提交按钮	type="submit"	提交表单
单选框	type="radio"	多选一
复选框	type="checkbox"	多选多
下拉框	<select> + <option>	下拉选择
文本域	<textarea>	多行文本输入
文件上传	type="file"	选择文件