Html表单和表单元素

Html表单和表单元素

1.什么是表单Form

• 用户与服务器交互的界面。
• 表单负责收集用户提交的信息，然后交给服务器去处理，给用户一个反馈信息。
• 表单是用来向服务器提交数据的最常用的方式

2. 表单的写法

<form action="/signin" method="post">
  <p>姓名: <input type="text" name="fname" /></p>
  <p>密码: <input type="password" name="password" /></p>
  <input type="submit" value="登陆" />
</form>

3. 表单属性

accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	服务器可处理的表单数据字符集。
action	URL	提交表单时向何处发送表单数据。
autocomplete	onoff	是否启用表单的自动完成功能。
enctype	见下面说明	在发送表单数据之前如何对其进行编码。
method	get post	于发送 form-data 的 HTTP 方法。
name	形象的名字如login-form	表单的名称，或是输入项的名称，不可缺少。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

---

enctype常用取值

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

4. 表单元素及type

<input>输入控件
类型有很多
type=text|radio|checkbox|password|submit|reset|image|file|button

text        文本字符串
radio       多选一
checkbox    单选或多选框
password    以*号代替显示
submit      提交，一般是按钮样式
reset       重置，清空填充的其它输入框中的数据
image       图片按钮，可触发form提交，也会自动提交form
file        选择和上传文件
button      与submit的区别是：submit会自动触发form的提交动作，但button不行，需要写一些javascript脚本来提交数据。

---

表单中还可以放以下标记：

---

<textarea>      多行文本

---

<label>         纯显示文字

---

<fieldset>      组合表单中的元素
<legend>        组合的头
示例：
    <fieldset>
        <legend>请选择性别</legend>
        男性：<input type="radio" name="gender" value="男"/><br>
        女性：<input type="radio" name="gender" value="女"/>
    </fieldset>

---

<select>            选择列表，即下拉列表
<option>            列表项，可选项
示例：
<select name="country">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
</select>

<checkbox>          多选框
示例：
            <tr>
                <td>兴趣爱好</td>
                <td>
                    <input name="favorite" type="checkbox" value="徒步" />徒步<br>
                    <input name="favorite" type="checkbox" value="看电影" />看电影
                </td>
            </tr>
            传递值 favorite=[徒步,看电影]

---

<button>            按钮，也能自动提交表单数据