HTML <form> 表单标签用法详解

作者:前端大神~ | 时间:2019-05-19

HTML <form> 表单标签可以用来创建表单,但实际工作中该怎么使用呢?表单都包含有那些元素和属性,下面我就为大家详细讲解下。

定义和用法

HTML <form> 标签主要用来创建表单

它包含了很多表单元素和属性

<form  method="post"(规定如何发送表单数据      常用值:get|post)
 action="result.html">(表示向何处发送表单数据)
   <p>  名字:<input name="name" type="text" >  </p>
   <p>  密码:<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

html <form>标签属性

accept:服务器接收到的文件的类型(html5版本也不支持);

accept-charset:服务器可处理的表单数据字符集;

action:当提交表单时向何处发送表单数据;

autocomplete:是否启用表单的自动完成功能,值可以是:on、off,html5新增;

enctype:在向服务器发送表单数据之前如何对其进行编码,method="post"时可以使用,值可以是:multipart/form-data、text/plain等;

method:用于发送表单数据的HTTP方法,值可以是:get、post;name:规定表单的名称,在xhtml中也废弃,使用id来代替;

novalidate:提交表单时不进行验证,值为:novalidate,html5新增;

target:在何处打开action属性中的地址,值可以是:_blank、_self、_parent、_top;

表单元素

<input> 元素是最重要的表单元素,根据不同的 type 属性,可以变化为多种形态

HTML<form>表单标签用法详解

<select> 元素定义下拉列表

<option> 元素定义下拉列表中待选择的选项,通过添加 selected 属性来定义预定义选项

<textarea> 元素定义多行输入字段(文本域)

<button> 元素定义可点击的按钮

<fieldset> 标签可以将表单内的相关元素分组。

<label> 标签为 input 元素定义标注(标记)。

浏览器支持

目前市面上大多数浏览器都支持HTML <form> 表单标签


通过上面对HTML <form> 表单标签的详细讲解,大家能够掌握它的用法。