对HTML表单、表单属性的认识

爱猫的洋洋子

已于 2022-05-20 20:47:28 修改

阅读量410

点赞数

分类专栏： HTML学习文章标签：学习 html5

于 2022-05-20 20:46:22 首次发布

本文链接：https://blog.csdn.net/Hero_era/article/details/124833347

版权

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、HTML 表单

（一）HTML 表单用于搜集不同类型的用户输入

一、HTML 表单

（一）HTML 表单用于搜集不同类型的用户输入

<form> 元素——HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

实例

<form>
 .
form elements
 .
</form>

（二）HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

1、<input> 元素

<input>元素是最重要的表单元素
<input>元素有很多形态，根据不同的 type 属性

先列几个简单的类型以及对应的几个例子

类型	描述
text	定义常规文本输入
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

1）文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

<!DOCTYPE html>
<html>
  <body>

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

  </body>
</html>

运行图如下：

注：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

2）单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

<!DOCTYPE html>
<html>
  <body>

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

  </body>
</html>

运行图如下：

3）提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<!DOCTYPE html>
<html>
  <body>

    <form action="/demo/demo_form.asp">
       First name:<br>
       <input type="text" name="firstname" value="Mickey">
       <br>
       Last name:<br>
       <input type="text" name="lastname" value="Mouse">
       <br><br>
       <input type="submit" value="Submit">
    </form> 

  </body>
</html>

运行图如下：

二、HTML表单属性

（一）Action 属性

action 属性定义提交表单时要执行的操作。
通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

给个例子：

<!DOCTYPE html>
<html>
   <body>

     <h1>HTML 表单</h1>

   <form action="/demo/html/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="yang"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="yang"><br><br>
      <input type="submit" value="提交">
   </form> 

   </body>
</html>

运行图如下：

（二）Target 属性

1、target 属性规定提交表单后在何处显示响应。

2、target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中
_self	响应显示在当前窗口中
_parent	响应显示在父框架中
_top	响应显示在窗口的整个 body 中
framename	响应显示在命名的 iframe 中

注：默认值为 _self，这意味着响应将在当前窗口中打开。

以上面的第一个例子的数据为基础：

<form action="/action_page.php" target="_blank">

运行图：

（三）Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。
提交表单数据时，默认的 HTTP 方法是 GET。

以上述第一个例子中数据为基础，在提交表单数据时使用 GET 方法：

<form action="/action_page.php" method="get">

运行图：

在提交表单数据时使用 POST 方法：

<form action="/action_page.php" method="post">

运行图：

关于 GET 的注意事项：

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

关于 POST 的注意事项：

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

注：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

（四）Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

以上述第一个例子中数据为基础，启用自动填写的表单：

<form action="/action_page.php" autocomplete="on">

运行图：

（五）Novalidate 属性

novalidate 属性是一个布尔属性。
如果已设置，它规定提交时不应验证表单数据。

以上述第一个例子数据为基础，未设置 novalidate 属性的表单：

<form action="/action_page.php" novalidate>

运行图：

（六）所有 <form> 属性的列表

属性	描述
accept-charset	规定用于表单提交的字符编码
action	规定提交表单时将表单数据发送到何处
autocomplete	规定表单是否应打开自动完成（填写）功能
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method="post"）
method	规定发送表单数据时要使用的 HTTP 方法
name	规定表单名称
novalidate	规定提交时不应验证表单
rel	规定链接资源和当前文档之间的关系
target	规定提交表单后在何处显示接收到的响应

先学习到这里，over！

爱猫的洋洋子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对HTML表单、表单属性的认识

目录一、HTML 表单（一）HTML 表单用于搜集不同类型的用户输入（二）HTML 表单包含表单元素二、HTML表单属性（一）Action 属性（二）Target 属性（三）Method 属性关于 GET 的注意事项：关于 POST 的注意事项：（四）Autocomplete 属性（五）Novalidate 属性（六）所有属性的列表一、HTML 表单（一）HTML 表单用于搜集不同类型的用户输入<form> 元素——HTML .
复制链接

扫一扫