HTML的 <form> 标签

<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> 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,168评论 0 0
  • 一.什么是< form>表单 格式: 作用:form表单一般用来收集用户的信息,并把信息传送到后台。 注意点:1....
    饥人谷_刘冲阅读 2,821评论 0 1
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 934评论 0 1
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,261评论 3 17
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 4,104评论 0 3