大前端（八） -- HTML5 标签 7 -- 表单标签-CFANZ编程社区

HTML 表单标签

HTML 表单用于搜集用户输入的不同类型的数据并将其上传至服务端。一起学习表单中最常用的标签吧

1. fieldset 标签

fieldset 标签用于在表单中划分区域并显示边框，起到分组的作用。例如：可以将整个表单中的控件放到一个 fieldset 标签中；也可以将表单中功能相关联的几个控件置于同一个 fieldset中。

2. legend 标签

legend 标签用于设置分组的标题。通常来讲，fieldset 和 legend配对使用。

3. input 标签

input 标签是表单中功能最丰富的标签，以下几种输入元素均可使用 input 实现。

单行文本框

只需将input标签的type属性设置为text即可

密码输入框

只需将input标签的type属性设置为password即可

数字输入框

只需将input标签的type属性设置为number即可

邮箱输入框

只需将input标签的type属性设置为email即可

日期输入框

只需将input标签的type属性设置为date即可

时间输入框

只需将input标签的type属性设置为time即可

颜色输入框

只需将input标签的type属性设置为color即可

单选框

只需将input标签的type属性设置为radio即可

复选框

只需将input标签的type属性设置为checkbox即可

文件上传

只需将input标签的type属性设置为file即可

提交

只需将input标签的type属性设置为submit即可

重置

只需将input标签的type属性设置为reset即可

4. select 和 option标签

利用 select 和 option 标签可实现下拉选择，比如用户注册时的省份选择。

5. textarea 标签

利用 textarea 标签可在 HTML 中创建供用户输入的文本区域

表单的提交

利用刚才提到的这些标签就可以实现简单的表单页面了；在此之后我们需要将表单提交至服务器。在此介绍与表单提交有关的几个属性。

2.1 action

处理表单数据的服务器地址

2.2 method

提交表单的方式，常用的为 get 和 post

2.3 enctype

enctype 表示将表单数据发送到服务器之前对表单数据进行编码。它有三种取值：

application/x-www-form-urlencoded：此为默认方式，在发送数据前将数据中的特殊字符进行URL编码处理。比如，将空格变为+号，将特殊符号转换为ASCIIHEX 值。
text/plain：该取值的作用与application/x-www-form-urlencoded 非常类似，它也将表示将空格转换为 “+” 加号，但不对特殊字符编码
multipart/form-data：表示不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

2.4 target

提交表单数据后，服务器会作出相应的响应；所以，我们可以在浏览器中显示服务器返回的数据。那么，是在原来的窗口显示数据呢？还是新打开一个窗口呢？此时可通过target属性来指定显示方式。target属性值常用的有：

_self

它表示在原窗口中显示数据

_blank

它表示在新窗口中显示数据

表单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML表单</title>
</head>
<body>
  <form id="userform" action="your url" method="post" 
  title="用户注册表单" target="_self" enctype="multipart/form-data">
    <fieldset>
      <legend>用户注册信息</legend>
      <br>
      昵称:<input type="text" name="un" maxlength="15" value="Tom">
      <br>
      <br>
      密码:<input type="password" name="pw" maxlength="10">
      <br>
      <br>
      性别:<input type="radio" name="gender" value="m" checked="checked">男
      <input type="radio" name="gender" value="w">女
      <br>
      <br>
      头像:<input id="userphoto" type="file" name="profile">
      <br>
      <br>
      籍贯:<select name="province">
        <option >河北</option>
        <option >辽宁</option>
        <option >吉林</option>
        <option >云南</option>
        <option selected="selected">广西</option>
      </select>
      <br>
      <br>
      爱好:<input name="hobby" type="checkbox">读书
      <input name="hobby" type="checkbox">写字
      <input name="hobby" type="checkbox" checked="checked">弹琴
      <br>
      <br>
      个人简介:
      <br>
      <br>
      <textarea name="introduce" cols="30" rows="10">请在此输入简介</textarea>
      <br>
      <br>
      个人网站:<input name="userurl" type="url">
      <br>
      <br>
      个人邮箱:<input name="useremail" type="email">
      <br>
      <br>
      身体体重:<input name="userweight" type="number">
      <br>
      <br>
      出生日期:<input name="userdate" type="date">
      <br>
      <br>
      详细时间:<input name="usertime" type="time">
      <br>
      <br>
      性格颜色:<input type="color" name="usercolor">
      <br>
      <br>  
      <input type="submit" value="开始注册">
      <input type="reset" value="重置信息">
      <br>
      <br>
      
    </fieldset>
  </form>
  
</body>
</html>

大前端（八） -- HTML5 标签 7 -- 表单标签_input标签

HTML5中表单的新特性

form属性

在HTML5之前，所有的表单标签都必须放在form标签中。但是，在HTML5中新增了form属性，用于表示该标签所属的form标签。所以，每个标签不必必须放在form标签中也能成为表单的一部分，只需把该标签的form属性的值设置为其所属表单的id即可。例如，在刚才的示例中再添加一个输入框用于记录毕业院校

毕业院校:<input type="text" name="school" form="userform">

代码如上所示，那么该input标签也属于了userform表单；亦会被提交至服务端。

datalist标签

datalist 标签用于展示文本框与下拉菜单组合在一起的效果，请注意 datalist 的 id 值必须是 form 表单的 list 属性值。请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>datalist标签</title>
</head>
<body>
  <form action="url" method="get">
    请输入你最喜欢的女明星:<input type="text" name="name" list="namesList">
  </form>
  <datalist id="namesList">
    <option value="lbb">李冰冰</option>
    <option value="fbb">范冰冰</option>
    <option value="gyy">高圆圆</option>
  </datalist>
</body>
</html>

大前端（八） -- HTML5 标签 7 -- 表单标签_表单_02

formxxxx 属性

为了更加方便的操控表单标签，在HTML5中新增了几个 formxxxx 属性，简介如下：

formaction 属性用于指定表单提交的地址
formmethod 属性用于指定表单提交的方式
formtarget 属性用于指定打开服务端响应URL的方式
formenctype 属性用于指定表单数据提交时的编码方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML表单中的formxxx属性</title>
</head>
<body>
  <form>
    username:<input type="text" name="un">
    <br>
    <br>
    password:<input type="password" name="pw">
    <br>
    <br>
    <input type="submit" value="注册" formaction="regist url" formmethod="get" formtarget="_self" formenctype="application/x-www-form-urlencoded" >

    <input type="submit" value="登录" formaction="login url" formmethod="post" formtarget="_blank" formenctype="multipart/form-data">
  </form>
</body>
</html>