• 2021.3.10


    今日学习内容:

      

      第一天  第二天 第三天  第四天  第五天 
    所花时间(小时) 4  4.5      
    代码量(行) 200 500      
    博客量(篇) 1  1      
    了解到的知识点 html表单  html表单属性      

     HTML <form> 元素的不同属性。

    Action 属性

    action 属性定义提交表单时要执行的操作。

    通常,当用户单击“提交”按钮时,表单数据将发送到服务器上的文件中。

    在下面的例子中,表单数据被发送到名为 "action_page.php" 的文件。该文件包含处理表单数据的服务器端脚本:

    实例

    提交后,将表单数据发送到 "action_page.php":

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="Bill"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Gates"><br><br>
      <input type="submit" value="Submit">
    </form>

    提示:如果省略 action 属性,则将 action 设置为当前页面。

    Target 属性

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

    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 规定提交表单后在何处显示接收到的响应。
  • 相关阅读:
    Python的包管理工具Pip
    [Reactive Programming] RxJS dynamic behavior
    [Reactive Programming] Using an event stream of double clicks -- buffer()
    [RxJS + AngularJS] Sync Requests with RxJS and Angular
    [Javascript] An Introduction to JSPM (JavaScript Package Manager)
    [Angular 2] 9. Replace ng-modle with #ref & events
    [React] Intro to inline styles in React components
    [AngualrJS + Webpack] Production Source Maps
    [AngularJS + Webpack] Uglifying your JavaScript
    [AngularJS + Webpack] Production Setup
  • 原文地址:https://www.cnblogs.com/marr/p/14903739.html
Copyright © 2020-2023  润新知