HTML - 表单

<form> 的常用属性有以下几种：

属性	值	描述
aciton	URL	服务器的 URL
method	GET、POST	HTTP 方法
name	form_name	表单的名称
target	blank、self、parent、top	在何处打开 action URL
enctype	以下	表单数据的编码方式

//在发送前编码所有字符（默认）
application/x-www-form-urlencoded
//不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
multipart/form-data
//空格转换为 "+" 加号，但不对特殊字符编码。
text/plain

表单常见的元素有以下几种：

标签	描述
<input>	表单输入标签
<select>	菜单和列表标签
<option>	菜单和列表项目标签
<textarea>	文字域标签
<optgroup>	菜单和列表项目分组标签

input 标签

多数情况下被用到的表单标签是输入标签 <input>，<input> 是单标记标签，输入类型是由类型属性 type 定义的，大多数经常被用到的输入类型如下：

type 属性值	描述
text	文本域
password	密码域
file	文件域
checkbox	复现域
radio	单选域
button	按钮域
submit	提交域
reset	重置域
hidden	隐藏域
image	图像域

<form>
    姓名：<input type="text" name="username">
    密码：<input type="password" name="paw">
    提交：<input type="submit" name="">
</form>

text password 单行文本域

文字域有以下几个常用的属性：

属性	描述
name	value 的 key
maxlength	可输入的最大字符数
size	文本框宽度，以字符数为单位。缺省值是 20
value	文本框的默认文本
placeholder	占位符，无文本输入时显示

maxlength 这个属性要比 iOS 优越啊，UITextField 如果需要限制长度要重写代理方法，还要考虑删除字符、输入法拼音已满但汉字还还打出来等情况。

<h1 align="center">注册信息</h1>
<hr color="#336699"/>
<form>
    <table width="600" bgcolor="#f2f2f2" align="center">
        <tr>
            <td>
                姓名：
            </td>
            <td>
                <input type="text" name="username" value="" placeholder="请输入姓名" size="25" maxlength="6">
            </td>
        </tr>
        <tr>
            <td>
                邮箱：
            </td>
            <td>
                <input type="text" name="email" value="@163.com" placeholder="" size="25">
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="password" name="paw" value="" placeholder="请输入密码" size="25" maxlength="6">
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="password" name="paw_confirm" value="" placeholder="请再输入密码" size="25" maxlength="6">
            </td>
        </tr>
    </table>
</form>

radio checkbox 单选和复选

属性名	描述
name	value 的 key，相同 name 的 radio，只能选中一个
value	选项代表的值
checked	设置此项为选中

男<input type="radio" name="sex" value="men">
女<input type="radio" name="sex" value="women">
保密<input type="radio" name="sex" value="secret" checked>

读书<input type="checkbox" name="hobby1" value="read_book" checked>
跳舞<input type="checkbox" name="hobby2" value="dance">
唱歌<input type="checkbox" name="hobby3" value="sing">

button submit reset 按钮

属性名	描述
value	按钮的标题

<input type="button" name="" value="来点我">
<input type="submit" name="" value="submit">
<input type="reset" name="" value="reset">

image 图像

image 可以设置一张图片作为按钮，其他方面与 submit 相同。

<input type="image" name="image_button" src="image_url">

hidden 隐藏

hidden 标签用于隐藏，主要用于希望将数据提交给服务器，但又不希望用户感知到时。

<input type="hiddent" name="hiddent" value="这是一个用户注册信息">

select option 列表和菜单

<select> 和 <option> 标签用于弹出列表，<select> 是列表，<option> 是列表项。

<select> 的常用属性有：

属性	描述
name	value 的 key
multiple	开启 shift 多选
size	弹出框显示多少项，==1 时弹窗显示，>1 时滚动显示

<option> 常用的属性有：

属性	描述
value	选项代表的值
selected	设置此项为选中

<form>
    <select size="4" multiple>
        <option value="default">---请选择---</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="hangzhou" selected="">杭州</option>
    </select>
</form>

optgroup 可选项分组

<select>
    <option value="default">---请选择---</option>
    <optgroup label="北方">
        <option value="beijing">北京</option>
    </optgroup>
    <optgroup label="南方">
        <option value="shanghai">上海</option>
    </optgroup>
</select>

类似 iOS 中 section 和 row 的 UI 关系。

textarea 多行文本域

单行文本域只能输入一行的内容，多行文本域可以输入多行文本。

类似 iOS 中 UITextField 和 UITextView 的 UI 区别。

<textarea> 常用的属性有：

属性	描述
name	value 的 key
placeholder	占位符
rows	可看行数
cols	可见宽度

<form>
    <textarea name="detail" rows="4" placeholder="请填写内容" cols="50">
        default value
    </textarea>
</form>