【HTML基础-2】HTML表单详解

像风一样9

已于 2022-03-29 21:09:39 修改

阅读量2k

点赞数 1

分类专栏： # 入门04：web安全之语言基础文章标签： HTML html表单用户注册

于 2022-03-25 23:53:06 首次发布

本文链接：https://blog.csdn.net/m0_64378913/article/details/123688058

版权

入门04：web安全之语言基础专栏收录该内容

21 篇文章 20 订阅

订阅专栏

1 form表单概述

当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

在 HTML 中创建表单需要用到标签，具体语法如下所示：

<form action="URL" method="GET|POST">
    表单中的其它标签
</form>

综上所述：
表单作用：用于搜集不同类型的用户输入。
表单应用场合：搜索框、登录框、文件上传、注册、留言板等。

2 表单属性

2.1 Action 属性

action 属性作用：用来指明将表单提交到服务器的哪个页面，即指明提交的URL。当不设置该属性，则默认提交到当前页面。

语法：<form action="URL"></form>。

关于URL值：

如果为空，则提交到当前页面，可用#代替。
绝对 URL：指向另一个网站（比如 action=“http://www.example.com/example.htm”）。
相对 URL：指向网站内的一个文件（比如 action=“example.htm”）。

2.2 Method 属性

Method 属性作用：表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，当不设置时，默认使用get方式提交。它们两者的区别如下：

GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中（URL中有显示，URL有长度限制）。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全，还可以上传文件。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

使用get方式（默认）语法：<form action="/action_page.php" method="get">
使用post方式语法：<form action="/action_page.php" method="post">

注意，根据经验，只要是表单，Method属性值均选用post，可以避免很多问题。

2.3 enctype 属性

enctype 属性作用：设置在提交表单数据之前如何对数据进行编码（适用于 method=“post” 的情况）.当不设置该属性时，默认属性值为application/x-www-form-urlencoded，即

语法：<form enctype="value">

属性值：

application/x-www-form-urlencoded：在发送前编码所有字符（默认）。
multipart/form-data：不对字符编码；在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

2.4 Target 属性

背景：当我们提交表单后，一般会得到对应的响应。
作用：根据属性值，指示在何处显示提交表单后接收到的响应。
语法：<form target=" _blank | _self | _parent | _top | framename ">

关于target几种属性的含义：

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

在网站https://www.runoob.com/try/try.php?filename=tryhtml_form_target练习不同target的响应方式，以加深理解。

2.5 name 属性

作用：规定元素的名称。name属性用于在JavaScript中引用元素，或者在表单提交之后引用表单数据。
语法：<form name="text">

2.6 Autocomplete 属性

作用：设定表单是否应打开自动完成功能，启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。部分浏览器不支持。
语法：<form action="/action_page.php" autocomplete="on | off">
属性值及含义：

on：默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
off：规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

在网站https://www.runoob.com/try/try.php?filename=tryhtml5_form_autocomplete尝试不同属性值的输入方法，在搜狗浏览器体现不错差别，在360浏览器可以体现出。

2.7 Novalidate 属性

作用：novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。
属性：novalidate 属性是一个布尔属性。
语法：<form action="/action_page.php" novalidate>

3 表单控件（表单元素）

表单用来收集用户数据，这些数据需要填写在各种控件中。HTML 控件也通过标签来实现，只是它们会呈现一些特殊的外观，并具有一些交互功能。

3.1 input元素

作用：定义输入框，在 < form > 元素中使用。输入框的类型取决于 type 属性。注意，input元素是单标签。

常用属性：

name属性：类型为text，该属性规定元素的名称。
pattern属性：类型为regexp，该属性用于设定验证元素值的正则表达式。
size属性：类型为number，该属性规定以字符数计的元素的可见宽度。
type属性：该属性设定要显示的元素的类型。该属性默认值为text，常用的属性值有：
①text：明文输入框，为默认值
②password：密文输入框
③radio：单选框。注意，在设置单选框时，需要将所有单选框的name属性设置为同一个值，才能实现只选一个。
④ checkbox：复选框。注意，所有复选框的name值不能设为相同的值
⑤reset：重置按钮。
⑥submit：提交按钮
⑦file：文件域，上传文件
⑧ hidden：隐藏
⑨image ：图片
⑩button：按钮
更多属性参考网址：《HTML< input>标签》

利用菜鸟在线编辑器尝试不同type值的应用结果。先清空源代码，然后复制黏贴代码并点击运行。

<form>
<!--尝试输入，文字显示为明文。-->
账号：<input type="text" name="fname"><br >
<!--尝试输入，文字显示为密文。-->
密码：<input type="password" name="passwd"><br >
<!--#显示为按钮。-->
按钮：<input type="button" name="button"><br >
<!--# 单选。-->
性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br >
<!--# 复选-->
爱好：<input type="checkbox" name="ah1">吃饭
			<input type="checkbox" name="ah2">睡觉
			<input type="checkbox" name="ah3">打豆豆
</form>

3.2 select元素和option元素

作用：< select >< /select >元素用来创建下拉列表。< option > < /option >标签用来定义列表中的可用选项。
语法：

<select>
    <option> 选项1</option>
    <option> 选项2</option>
    <option> 选项3</option>
    <option> 选项4</option>
    <option> 选项......</option>
</select>

< select >< /select >元素常用属性：

name属性：规定下拉列表的名称。
multiple属性：类型为布尔属性。设定可同时选择多个选项。
size属性：规定下拉列表中可见选项的数目。默认值是 1。如果使用了 multiple 属性，默认值是 4。
其他属性参考《HTML< select >标签》

< option > < /option >元素常用属性：

disabled属性：类型为布尔属性，用于禁用某个选项。可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该选项的使用。
selected属性：类型为布尔属性，设置默认预选项，被预选的选项会显示在下拉列表最前面的位置。
value属性：规定在表单被提交时被发送到服务器的值。
其他属性参考《HTML< option >标签》

在网站菜鸟在线编辑器练习不同属性的作用。

3.3 textarea元素

作用：< textarea >< /textarea >元素定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。注意，可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
< textarea >< /textarea > 元素常用属性：

name属性：为文本区域规定名称。用于在JavaScript中对元素进行引用，或者在表单提交之后，对表单数据进行引用。
maxlength属性：规定文本区域的最大长度（以字符计）。
required属性：类型为布尔属性。规定一个文本区域是必需的/必须填写（以提交表单）。
其他属性参考《HTML标签》

在网站菜鸟在线编辑器练习不同属性的作用。

语法：<textarea name="定义名称" maxlength="数字" ></textarea>

3.4 button元素

作用：< button >< /button >元素定义一个按钮。注意，不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。
对比：在< button >< /button >元素，可以放置内容，比如文本或图像。这是该元素与使用< input >元素创建的按钮之间的不同之处。

常用属性：

name属性：为按钮规定名称。
type属性：规定按钮的类型。type = button为普通按钮，reset为重置按钮，submit为提交按钮。
value属性：按钮的初始值。
重置form表单属性：可以利用button属性覆盖form属性，如action、method等
其他属性参考《HTML 标签》

在网站菜鸟在线编辑器练习不同属性的作用。

语法：<button name="定义名称" type="button" value="值"></button>

3.5 optgroup元素

作用：< optgroup >< /optgroup >元素定义选项组，经常用于把相关的选项组合在一起。
应用场合：应用于select之下option之上。

属性：.

disabled属性：类型为布尔属性，表示选项组被禁用。
label属性：为选项组规定描述标签。

在网站菜鸟在线编辑器练习不同属性的作用。

例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
 
</body>
</html>

在这里插入图片描述

3.6 fieldset元素与legend元素

作用：< fieldset >< /fieldset >元素将表单内的相关元素分组，会在相关表单元素周围绘制边框。< legend >< /legend >元素定义标题内容与位置。

< fieldset >< /fieldset >元素属性：

disabled属性：类型为布尔属性。禁用一组表单元素（一个 fieldset）。
name属性：规定 fieldset 的名称。用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
其他属性参考《HTML标签》

< legend >< /legend >元素属性：

align属性：设置对其位置。
HTML5 不支持 align 属性。请使用 CSS 代替。

在网站菜鸟在线编辑器可练习fieldset元素与legend元素不同属性的作用。

例子：

<fieldset disabled name = "name">
    <legend align="left|right|top|bottom">Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>

在这里插入图片描述

3.7 datalist元素

作用：规定了< input >元素可能的选项列表。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
应用场合：应用于< input >元素下.
在网站菜鸟在线编辑器练习该元素。
例子：

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在这里插入图片描述

3.8 总结HTML 表单中元素

HTML 表单中可以包含如下表所示的控件：

控件/标签/元素	描述
< input >	定义输入框
< textarea >	定义文本域（一个可以输入多行文本的控件）
< label >	为表单中的各个控件定义标题
< fieldset >	定义一组相关的表单元素，并使用边框包裹起来
< legend >	定义 < fieldset > 元素的标题
< select >	定义下拉列表
< option >	定义下拉列表中的选项
< optgroup >	定义选项组
< button >	定义一个可以点击的按钮
< datalist >	指定一个预先定义的输入控件选项列表
< keygen >	定义表单的密钥对生成器字段
< output >	定义一个计算结果

4 综合案例

写一个简单的用户注册页面如下：

<html>
    <head>
        <meta charset="utf-8">  
    <title>
    表单
    </title>
    </head>

    <body>
        <h1>用户注册页面</h1>
        <form action="#" method="post" enctype="multipart/form-data">
          用户名: <input name="user" type="text"/> <br/>
          <!--user为用户输入-->
          头像上传: <input name="touxiang" type="file"/> <br/>
          密码:  <input  name="passwd1" type="password"/> <br/>
          确认密码: <input  name="passwd2" type="password"/> <br/>
          性别: <input  name="sex" value="1" type="radio"/> 男<input name="sex" value="0" type="radio"/>女<br/>
          爱好: <input  name="hobby1" value="cf" type="checkbox"/> 吃饭
          <input  name="hobby2" value="sj" type="checkbox"/> 睡觉
          <input  name="hobby3" value="ddd" type="checkbox"/> 打豆豆 <br/>
          出生日期:<input name="year" type="text"/>年
          <select name="month"> 
              <option value="选择月份">选择月份</option>
              <option value="1">1月</option>
              <option value="2">2月</option>
              <option value="3"> 3月</option>
              <option value="...">....</option>
          </select>
          <input name="day" type="text"/>日<br/>
          <input type="reset"/>
          <input name="submit" value="submit" type="submit"/><br/>
         同意注册协议 <textarea name="protocal"></textarea><br/>
         <input name="token" value="49ba59abbe56e057" type="hidden"/><br/>
        </form>
    </body>

</html>

访问该网页后，效果如下：
在这里插入图片描述

5 归纳

（1）掌握form表单的作用：用于搜集不同类型的用户输入。
（2）掌握form表单常用属性的作用、语法及应用。
（3）掌握form表单常用元素的作用、语法及应用。

参考文章

[1] 《菜鸟教程HTML < form > 标签》
[2] 《HTML 表单属性》
[3] 《HTML表单元素》
[4] 《【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）》

像风一样9

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML基础-2】HTML表单详解

目录1 form表单概述2 表单属性2.1 Action 属性2.2 Method 属性2.3 enctype 属性2.4 Target 属性2.5 name 属性2.6 Autocomplete 属性2.7 Novalidate 属性3 表单控件（表单元素）3.1 input元素3.2 select元素和option元素3.3 textarea元素3.4 button元素3.5 optgroup元素3.6 fieldset元素与legend元素3.7 datalist元素3.8
复制链接

扫一扫