构造HTML表单 - 基础指南

一、第一个表单

什么是表单？

HTML表单用户用户与服务器交互。用户填写信息， 提交到web服务器，服务器有专门针对用户提交的信息的处理。

HTML表单与HTML文档的区别， 表单提交到web服务器，需要专门设置一个服务器来接收和处理数据。

如何构造表单?

为了构建我们的联系人表单，我们将使用以下HTML元素:<form>, <label>, <input>, <textarea>, and <button>.

<form>

1. 每个表单都以<form action="./my-first-heading-page.html" method="post">开始

<form action="./my-first-heading-page.html" method="post">
    
</form>

• form ： 类似于 div等是容器元素
• action ： 表单将要发送到的页面 去处理
• method ： 表明表单传递给服务器的方法

<lable>、<input>、<button>

构造一个需要输入：用户名、邮箱、描述信息的表单。

<!--登录标签-->
        <div>
            <!--输入用户名-->
            <lable for="name">用户名</lable>
            <input type="text" id="name" name="user_name"> <!--这是一个input标签，id是name,类型是text-->
        </div>
        <div>
            <lable for="mail">your email</lable>
            <input type="email" id="mail" name="user_email">
        </div>
        <div>
            <lable for="textarea"></lable>
            <textarea id="msg" name="user_describe"></textarea>
        </div>
        <div cass="button">
            <button type="submit" id="submit">Send your message</button>
        </div>
    </form>
</body>

• lable：一个text标签。 使用for属性；它是将标签链接到表单小部件的一种正规方式。这个属性引用对应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件

• input ：用户输入信息

  • input有不同的type， type=text可以输入任意内容， type = “email” 会校验是否符合邮箱格式…
  • input是空元素， 没有闭合部分 </…>
  • 提示用户输入： <input type="text" value="user-name">

• textarea：与input不同，textarea是闭合元素.

  • 提示用户输入： <textarea>user-name</textarea>

• button：按钮type=

  • “submit”，会发送表单到action所定义的主页
  • reset：会重置所有输入框的内容为默认设置

向web服务器发送表单

form 通过action method的设置，将数据发送给对应的页面和方式。

但是还需要告诉服务器端每个数据段的名字， 这样服务器才可以对应的直到哪个数据段来自哪里，这需要在客户端进行标明。

**标签中的name属性用来标明每个数据段 ** name="..."

<input type="text" id="name" name="user_name">
<input type="email" name="user_email">
<textarea id="msg" name="user_describe"></textarea>

每个标签输入的数据段， 分别被不同的name标识

二、如何构造HTML表单

2.1 <form>元素

HTML表单元素都需要用 <form>包裹。

创建HTML表单都需要从这个开始，将所有内容放入其中。

2.2 <fieldset> <legend>等

fieldset 将所有相同目的的小部件集合在一起， 的文本内容正式地描述了里所含有部件的用途。。

比如写一个单选框块

<fieldset>
     <legend>Title</legend> <!--描述文本-->
     <ul>
         <li> <!--每个单选框占用一个li-->
             <input type="radio" id="sex-1" name="sex"> <!--单选框需要所有name一样-->
             <label for="sex-1">Ace</label>
         </li>
         <li> <!--每个复选框占用一个li-->
             <input type="radio" id="sex-2" name="sex">
             <label for