HTML 表单

  • HTML 表单

    HTML表单示例:
    First Name : Last Name :
  • HTML <form>元素

    HTML <form>元素定义用于收集用户输入的表单:
                                      <form>
                       .
                       表单元素
                       .
                       </form>
    
    HTML <form>包含表单元素。 表单元素是不同类型的输入元素,如文本字段,复选框,单选按钮,提交按钮等。
  • HTML <input>元素

    <input>元素是最重要的表单元素。 <input>元件可以根据type属性的不同被浏览器显示在几种类型。 这里有些例子:
    类型 描述
    <input type =“text”> 定义单行文本输入字段
    <input type =“radio”> 定义单选按钮
    <input type =“submit”> 定义提交按钮
    后面的教程您将学到更多<input>type属性的相关知识

    文本类型

    <input type="text">为文本输入定义一行输入字段 :
    <form>
                     用户名:<br>
                     <input type="text" name="username">
                     <br>
                     推荐人:<br>
                     <input type="text" name="comperson">
                   </form>
    
    尝试一下
    注意:表单本身不可见。另请注意,文本字段的默认宽度为20个字符。

    单选按钮

    <input type="radio">定义一个单选按钮。单选按钮让用户选择有限数量的选项中的一个:
    <form>
                 <input type="radio" name="lang" value="php" checked> PHP<br>
                 <input type="radio" name="lang" value="java"> Java<br>
                 <input type="radio" name="lang" value="python"> Python
               </form>
    
    尝试一下

    提交按钮

    <input type="submit">定义一个按钮,用于将表单数据提交给表单处理程序。 表单处理程序通常是一个服务器页面,其中包含用于处理输入数据的脚本。 表单处理程序在<form>action属性中指定:
    <form action="/jc_script/urlencode.php">
                 用户名:<br>
                 <input type="text" name="username" value="张三"><br>
                 推荐人:<br>
                 <input type="text" name="comperson" value="李四"><br><br>
                 <input type="submit" value="提交">
               </form>
    
    尝试一下
  • action属性

    action属性定义提交表单时要执行的操作。 通常,当用户单击提交按钮时,表单数据将发送到服务器上的网页。 在上面的示例中,表单数据被发送到服务器上名为“/jc_script/urlencode.php”的页面。此页面包含处理表单数据的服务器端脚本:
    <form action="/jc_script/urlencode.php">
    HTML <form>包含表单元素。 表单元素是不同类型的输入元素,如文本字段,复选框,单选按钮,提交按钮等。
    注意:如果action省略该属性,则将操作设置为当前页面。
  • target属性

    target属性指定提交的结果是在新的浏览器选项卡打卡,还是在当前窗口中打开。 默认值为“ _self”,表示表单将在当前窗口中提交。 要在新的浏览器选项卡中打开表单结果,请使用值“ _blank”:
    <form action="/jc_script/urlencode.php" target="_blank">
    其他合法值是“ _parent”,“ _top”或表示iframe的名称。
  • method属性

    method属性指定提交表单数据时要使用的HTTP方法(GETPOST):
    <form action="/jc_script/urlencode.php" method="get">
    或者:
    <form action="/jc_script/urlencode.php" method="post">

    什么时候使用GET

    提交表单数据时的默认方法是GET。但是,使用GET时,提交的表单数据将显示在页面地址字段中:
    /jc_script/urlencode.php?firstname=Jim&lastname=Green
    关于GET的说明:
    • 将表单数据附加到名称/值对中的URL中
    • URL的长度是有限的(约3000个字符)
    • 切勿使用GET发送敏感数据,例如密码!(将在URL中显示)
    • 对于用户想要为结果添加书签的表单提交很有用
    • GET更适合非安全数据,例如百度中的查询字符串

    什么时候使用POST

    如果表单数据包含敏感信息或个人信息,请始终使用POST。POST方法不会在页面地址字段中显示提交的表单数据。 关于POST的说明:
    • POST没有大小限制,可用于发送大量数据。。
    • 使用POST的表单提交无法添加书签。
  • 表单元素name属性

    每个输入字段必须具有name要提交的属性。 如果省略name属性,则不会发送该输入字段的数据。 此示例仅提交“lastname”输入字段:
    <form action="/jc_script/urlencode.php">
                     First name:<br>
                     <input type="text" value="Jim"><br>
                     Last name:<br>
                     <input type="text" name="lastname" value="Green"><br><br>
                     <input type="submit" value="提交">
                   </form>
    尝试一下
  • <fieldset>表单分组

    <fieldset>元素用于对表单中的相关数据进行分组。 <fieldset>元素限定用一个<legend>元素用于作为标题 。
    <form action="/jc_script/urlencode.php">
                     <fieldset>
                       <legend>个人信息:</legend>
                       名字:<br>
                       <input type="text" name="firstname" value="Jim"><br>
                       姓氏:<br>
                       <input type="text" name="lastname" value="Green"><br><br>
                       <input type="submit" value="提交">
                     </fieldset>
                   </form>
    尝试一下
  • <form>元素属性列表

    以下是所有<form>属性的列表:
    属性 描述
    accept-charset 指定提交的表单中使用的字符集(默认值:页面字符集)。
    action 指定提交表单的地址(url)(默认值:当前页面)。
    autocomplete 指定浏览器是否应自动填充表单(默认值:on)。
    enctype 指定提交数据的编码(默认值:是url编码的)。
    method 指定提交表单时使用的HTTP方法(默认值:GET)。
    name 指定用于标识表单的名称(对于DOM用法:document.forms.name)。
    novalidate 指定浏览器不应验证表单。
    target 指定怎么打开action属性中的地址目标(默认值:_self)。