<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
<form> 的属性有:
属性 | 值 | 描述 | 例子 |
---|---|---|---|
accept-charset | charset_list | 规定服务器可处理的表单数据字符集 | accept-charset="ISO-8859-1" |
action | URL | 规定当提交表单时向何处发送表单数据 | action="form_action.asp" |
autocomplete | on / off | 规定是否启用表单的自动完成功能 | autocomplete="on" |
enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码 | enctype="text/plain |
method | get / post | 规定用于发送 form-data 的 HTTP 方法 | method="get" |
name | form_name | 规定表单的名称 | name="myForm" |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证 | novalidate="novalidate" |
target | _blank, _self, _parent, _top, framename | 规定在何处打开 action URL | target="_blank" |
enctype 属性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
在 Django 上传文件需使用 "multipart/form-data"
<form> 实例
- 文本域(Text fields)
用户可以在文本域写入文本
<form>
名:
<input type="text" name="firstname">
<br><br>
姓:
<input type="text" name="lastname">
</form>
- 文本域(Textarea)
可以多行文本输入
<textarea rows="10" cols="30">
- 密码域
在密码域中键入字符时,浏览器将使用项目符号来代替这些字符
<form>
用户:
<input type="text" name="user">
<br><br>
密码:
<input type="password" name="password">
</form>
- 复选框
可以选择一个或多个选项
<form>
我喜欢自行车:
<input type="checkbox" name="Bike">
<br><br>
我喜欢汽车:
<input type="checkbox" name="Car">
</form>
- 单选按钮
只能选中其中一个
<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br><br>
女性:
<input type="radio" name="Sex" value="female" />
</form>
- 下拉列表
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
- 围绕式表单
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
- 提交功能
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
点击“提交”按钮,表单中的数据会被发送到 “action_page.php”
也可以用 HTML 的其他部件来完成同样的工作,比如<button>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<button type="submit">提交</button>
</form>