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

目录

一、HTML 表单

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

(二)HTML 表单包含表单元素

二、HTML表单属性

(一)Action 属性

(二)Target 属性

(三)Method 属性

关于 GET 的注意事项:

关于 POST 的注意事项:

(四)Autocomplete 属性

(五)Novalidate 属性

(六)所有属性的列表 


一、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 属性

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

给个例子:

<!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 属性

  1. method 属性指定提交表单数据时要使用的 HTTP 方法。
  2. 表单数据可以作为 URL 变量(使用 method="get")或作为 HTTP post 事务(使用 method="post")发送。
  3. 提交表单数据时,默认的 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 属性

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

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

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

运行图:

 

(五)Novalidate 属性

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

以上述第一个例子数据为基础,未设置 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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值