您的位置：首页 > Web前端 > HTML5

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

2019-05-12 18:03 1351 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011033906/article/details/89979685

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编码处理。比如，将空格变为+号，将特殊符号转换为 
      ASCII
      HEX
      值。
    • 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中表单的新特性

    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>

    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>

    在该示例中，有两个功能：登录和注册；不同的功能那么就有不同的action、method、target、enctype。在此通过formaction、formmethod、formtarget、formenctype属性灵活指定了在不同的操作下不同的表单提交方式。

    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航