form表单详解

form表单

form表单简介

• name：表单提交时的名称
• action：提交到的地址
• method：提交方式，默认为get
  post和get区别：
  
  

1. 数据提交方式，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用来提交大量数据
3. get最多提交2kb数据，post理论上没有限制
4. get提交的数据在浏览器历史记录中，安全性不好

一个完整的表单包含三个基本组成部分

• 表单标签
  是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
  
  
• 表单域
  是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等）
  
  
• 表单按钮
  用来提交< form >表单中所有信息到服务器
  *表单域和表单按钮都属于表单元素

  
  
  
  

form表单属性

form支持HTML的全局属性

accept

已弃用

accept-charset

定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
语法:

<form accept-charset="value" > 

常用值:

• UTF-8 – Unicode 字符编码
• ISO-8859-1 – 拉丁字母表的字符编码
• gb2312 – 简体中文字符集
  服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。
  理论上讲，可使用任何字符编码，但没有浏览器可以理解所有的编码。字符编码使用得越广泛，浏览器对其支持越好。

  
  
  
  

action

定义和用法: 必需的 action 属性规定当提交表单时，向何处发送表单数据。
语法:

<form action="value"> 

常用值:

• 绝对 URL – 指向其他站点（比如 src=“www.example.com/example.htm”）
• 相对 URL – 指向站点内的文件（比如 src=“example.htm”

autocomplete

定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>，以及下面的 < input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
语法:

<form autocomplete="on|off"> 

常用值:

• on 默认。规定启用自动完成功能。
• off 规定禁用自动完成功能。

enctype

定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
语法:

<form enctype="value"> 

常用值:

• application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
• multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的,窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
• text/plain 将空格转换为 “+” 符号，但不编码特殊字符,窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

method

定义和用法: method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）。

• 关于 GET 的注释：
• 关于 POST 的注释：

<form method="get|post"> 

常用值:

• get 默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
• post 以 HTTP post 事务的形式发送表单数据（form-data）。

name

定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
语法:

<form name="text"> 

常用值:
text 规定表单的名称。

novalidate

定义和用法: novalidate 属性是一个布尔属性。
novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。
语法: < form novalidate ="novalidate ">
常用值:

• novalidate 如果使用该属性，则提交表单时不进行验证。

target

定义和用法: target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。
语法:

<form target="_blank|_self|_parent|_top|framename"> 

常用值:

• _blank 在新窗口/选项卡中打开。
• _self 同一框架中打开。（默认）
• _parent 父框架中打开。
• _top 整个窗口中打开。
• framename 在指定的 iframe 中打开。

HTML 表单输入元素

文本域（Text Fields）

文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form> <span>First name:<span> <input type="text" name="firstname"><br> <span>Last name:<span/> <input type="text" name="lastname">  
     form> 

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form> <span>Password:<span/> <input type="password" name="pwd">  
     form> 

单选按钮（Radio Buttons）

< input type=“radio”> 标签定义了表单单选框选项

<form> <input type="radio" name="sex" value="male"><span>Male<span/><br> <input type="radio" name="sex" value="female"><span>Female<span/>  
     form> 

复选框（Checkboxes）

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form> <input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br> <input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>  
     form> 

显示效果如下:

提交按钮(Submit Button)

<form name="input" action="html_form_action.php" method="get"> <span>Username:<span/> <input type="text" name="user"> <input type="submit" value="Submit">  
     form> 

fieldset标签

实例如下

<form> <fieldset> <legend>Personalia: 
     legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text">  
      fieldset>  
       form> 

标签

标签作为计算结果输出显示(比如执行脚本的输出)。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"> 
     output>  
      form>