HTML 表单

HTML 表单用于搜集不同类型的用户输入。
HTML 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
<input> 元素是最重要的表单元素。<input> 元素有很多形态,根据不同的 type 属性。

1、文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

<html>

<body>
    <form>
        First name:<br />
        <input type="text" name="firstname"><br />
        Last name:<br />
        <input type="text" name="lastname">
    </form>

    <p>Note that the form itself is not visible.</p>
    <p>Also note that the default width of a text field is 20 characters.</p>
</body>

</html>
2、单选按钮输入

<input type="radio"> 定义单选按钮。

<html>

<body>
    <form>
        <input type="radio" name="sex" value="male">Male<br />
        <input type="radio" name="sex" value="female" checked>Female
    </form>
</body>

</html>
3、提交按钮

<input type="submit"> 定义用于向表单处理程序提交表单的按钮。
表单处理程序在表单的 action 属性中指定:

<html>

<body>
    <form action="action_page.php">
        First name:<br />
        <input type="text" name="firstname" value="Mickey"><br />
        <input type="text" name="lastname" value="Mouse"><br />
        <input type="submit" value="Submit">
    </form>
    <p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>

</html>
  • Action 属性
    action 属性定义在提交表单时执行的动作。
    通常,表单会被提交到 web 服务器上的网页。
    如果省略 action 属性,则 action 会被设置为当前页面。
<form action="action_page.php">
  • Method 属性
    method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="action_page.php" method="GET">
  • Name 属性
    如果要正确的被提交,每个输入字段必须设置一个 name 属性。
    以下实例只会提交 "lastname" 输入字段。
<form action="action_page.php">
      First name:<br />
      <input type="text" value="Mickey"><br />
      Last name:<br />
      <input type="text" name="lastname" value="Mouse"><br />
      <input type="submit" value="Submit">
</ form>
4、用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据。
<legend> 元素为 <fieldset> 元素定义标题。

<html>

<body>
    <form action="action_page.php">
        <fieldset>
            <legend>Personal information:</legend>
            First name:<br />
            <input type="text" name="firstname" value="Mickey"><br />
            Last name:<br />
            <input type="text" name="lastname" value="Mouse"><br />
            <input type="submit" value="Submit">
        </fieldset>
    </form>
</body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 表单是如何工作的? 用户在网页上填写表单并提交所填信息,浏览器将用户提交的数据发送至 Web 服务器, Web...
    饥人谷_Mily阅读 4,913评论 0 1
  • 常见问题 form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于搜集不同类型的...
    JohnHank阅读 3,153评论 0 0
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 9,494评论 0 3
  • HTML 表单用于搜集不同类型的用户输入。 1.<form> 元素:<form> 元素定义 HTML 表单 1.<...
    饥人谷_兔子君阅读 2,761评论 0 0
  • 1. 什么是HTML表单 定义:用于搜集不同类型的用户输入。 2.HTML 表单包含表单元素 表单元素指的是不同类...
    饥人谷_迪阅读 1,898评论 0 0