<form> | HTML表单标签的定义与用法

2020年11月25日2021年1月18日

定义与用法

<form> 标签用于为用户输入创建 HTML 表单；
<form>表单用于向服务器提交数据，如：姓名，邮件，密码，电话等；
<form>表单是HTML文档的重要组成部分，<form>内可包含众多元素，如：文本框，密码框，复选框，单选按钮，提交按钮，菜单等。

提示：<form>是块级元素，其前后会产生换行。

语法格式

<form action=”server url” method=”get|post”>
……
</form>

示例代码

<form action="#">  
<table>  
<tr>  
    <td class="tdLabel"><label for="register_name" class="label">姓名：</label></td>  
    <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_password" class="label">密码：</label></td>  
    <td><input type="password" name="password" id="register_password" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_email" class="label">邮箱：</label></td>  
    <td  
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_gender" class="label">性别：</label></td>  
    <td>  
<input type="radio" name="gender" id="register_gendermale" value="male"/>  
<label for="register_gendermale">男</label>  
<input type="radio" name="gender" id="register_genderfemale" value="female"/>  
<label for="register_genderfemale">女</label>  
    </td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_country" class="label">选择国家：</label></td>  
    <td><select name="country" id="register_country" style="width:160px">  
    <option value="china">中国</option>  
    <option value="india">印度</option>  
    <option value="pakistan">巴基斯坦</option>  
    <option value="japan">日本</option>  
    <option value="other">其它</option>  
</select>  
</td>  
</tr>  
<tr>  
    <td colspan="2"><div align="right"><input type="submit" id="register_0" value="提交"/>  
</div></td>  
</tr>  
</table>  
</form>

效果展示：

HTML表单标签列表

标签	描述
<form>	它定义了一个HTML表单，以在使用侧输入输入。
<input>	它定义了一个输入控件。
<textarea>	它定义了多行输入控件。
<label>	它定义了输入元素的标签。
<fieldset>	它将相关元素组合在一个表单中。
<legend>	它为<fieldset>元素定义标题。
<select>	它定义了一个下拉列表。
<optgroup>	它在下拉列表中定义了一组相关选项。
<option>	它在下拉列表中定义一个选项。
<button>	它定义了一个可点击的按钮。

HTML5表单标签列表

标签	描述
<datalist>	它指定了用于输入控制的预定义选项的列表。
<keygen>	它定义了表单的密钥对生成器字段。
<output>	它定义了计算结果。

浏览器支持

所有浏览器都支持 <form> 标签。

标签属性

: HTML5 中的新属性。

属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	onoff	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码。
method	getpost	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank_self_parent_topframename	规定在何处打开 action URL。

全局属性

<form> 标签支持 HTML 中的全局属性。

事件属性

<form> 标签支持 HTML 中的事件属性。

姓名：
密码：
邮箱：
性别：	男女
选择国家：