zoukankan      html  css  js  c++  java
  • 2021.3.18

    今日学习内容:

      第一天  第二天 第三天  第四天  第五天 
    所花时间(小时) 4  5  3  6  
    代码量(行) 600  700  400  300  
    博客量(篇) 1  1  1  1  
    了解到的知识点 html列表练习  html表单练习 html输入属性   html input表单属性  

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

    form 属性

    input 的 form 属性规定 <input> 元素所属的表单。

    此属性的值必须等于它所属的 <form> 元素的 id 属性。

    实例

    位于 HTML 表单(但仍是表单的一部分)之外的输入字段:

    <form action="/action_page.php" id="form1">
      <label for="fname">姓氏:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <input type="submit" value="提交">
    </form>
    
    <label for="lname">名字:</label>
    <input type="text" id="lname" name="lname" form="form1">

    formaction 属性

    input 的 formaction 属性规定当提交表单时,对输入(数据)进行处理的文件的 URL。

    注释:该属性会覆盖 <form> 元素的 action 属性。

    formaction 属性适用于以下输入类型:submit 和 image。

    实例

    带有两个提交按钮的 HTML 表单,它们具有不同的操作(action):

    <form action="/action_page.php">
      <label for="fname">姓氏:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">名字:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <input type="submit" value="提交">
      <input type="submit" formaction="/action_page2.php" value="以管理员提交">
    </form>

    formenctype 属性

    input 的 formenctype 属性指定提交时应如何编码表单数据(仅适用于 method="post" 的表单)。

    注释:此属性将覆盖 <form> 元素的 enctype 属性。

    formenctype 属性适用于以下输入类型:submit 和 image。

    实例

    有两个提交按钮的表单。第一个发送使用默认编码的表单数据,第二个发送编码为 "multipart/form-data" 的表单数据:

    <form action="/action_page_binary.asp" method="post">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <input type="submit" value="提交">
      <input type="submit" formenctype="multipart/form-data"
      value="以 Multipart/form-data 编码提交">
    </form>

    formmethod 属性

    input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。

    注释:此属性将覆盖 <form> 元素的 method 属性。

    formmethod 属性适用于以下输入类型:submit 和 image。

    表单数据可以作为 URL 变量(method="get")或作为 HTTP post 事务(method="post")发送。

    关于 GET 的注意事项:

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

    关于 POST 的注意事项:

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

    提示:如果表单数据包含敏感信息或个人信息,请务必使用 POST!

    实例

    有两个提交按钮的表单。第一个使用 method="get" 发送表单数据。第二个使用 method="post" 发送表单数据:

    <form action="/action_page.php" method="get">
      <label for="fname">姓氏:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">名字:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <input type="submit" value="使用 GET 提交">
      <input type="submit" formmethod="post" value="使用 POST 提交">
    </form>

    formtarget 属性

    input 的 formtarget 属性指定一个名称或关键字,该名称或关键字规定在提交表单后在何处显示收到的响应。

    注释:此属性将覆盖 <form> 元素的 target 属性。

    formtarget 属性适用于以下输入类型:submit 和 image。

    实例

    有两个提交按钮且有不同目标窗口的表单:

    <form action="/action_page.php">
      <label for="fname">姓氏:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">名字:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <input type="submit" value="提交">
      <input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
    </form>

    formnovalidate 属性

    input 的 formnovalidate 属性规定提交时不应验证 <input> 元素。

    注释:此属性将覆盖 <form> 元素的 novalidate 属性。

    formnovalidate 属性适用于以下输入类型:submit。

    实例

    有两个提交按钮的表单(进行和不进行验证):

    <form action="/action_page.php">
      <label for="email">Enter your email:</label>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="提交">
      <input type="submit" formnovalidate="formnovalidate"
      value="不进行验证的提交">
    </form>

    novalidate 属性

    novalidate 属性是 <form> 属性。

    如果已设置,novalidate 属性规定在提交时不应验证所有表单数据。

    实例

    规定在提交时不验证任何表单数据:

    <form action="/action_page.php" novalidate>
      <label for="email">Enter your email:</label>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="提交">
    </form>

    HTML Form 和 Input 元素

    标签描述
    <form> 为用户输入定义 HTML 表单。
    <input> 定义输入控件。
  • 相关阅读:
    Jquery+Ajax+Bootstrap Paginator实现分页的拼接
    推荐一款在线工具-程序员的工具箱
    推荐一款在线工具-程序员的工具箱
    Jquery+Ajax+Bootstrap Paginator实现分页的拼接
    JSP 基础语法
    jsp九大内置对象及四个作用域
    jdk 版本不一致导致的错误
    java虚拟机内存模型
    java 内存简介
    B2C
  • 原文地址:https://www.cnblogs.com/marr/p/14903889.html
Copyright © 2011-2022 走看看