下一节:

  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方法（GET或POST）： 
    <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）。
下一节: