HTML表单(form)是一种用于收集用户输入的HTML元素集合。一个典型的HTML表单包含以下部分:

  1. <form>标签:这是表单的容器,它定义了表单的属性,如action(提交地址)、method(提交方式,通常是GET或POST)等。
  
   <form action="/submit" method="post">
  
  1. <input>标签:这是表单中最重要的元素,用于接收用户的输入。它可以有多种类型,如textpasswordcheckboxradiosubmitresetbutton等。

    • type="text":文本输入框。

    • type="password":密码输入框,输入内容会被隐藏。

    • type="checkbox":复选框,允许用户选择多个选项。

    • type="radio":单选按钮,通常用于一组选项中选择一个。

    • type="submit":提交按钮,用于提交表单数据。

    • type="reset":重置按钮,用于清除表单中的所有输入。

    • type="button":普通按钮,可以自定义行为。

  
   <input type="text" name="username" placeholder="Username">
  
   <input type="password" name="password" placeholder="Password">
  
   <input type="checkbox" name="subscribe" value="yes"> Subscribe
  
   <input type="radio" name="gender" value="male"> Male
  
   <input type="radio" name="gender" value="female"> Female
  
   <input type="submit" value="Submit">
  
  1. <label>标签:用于为表单元素提供描述性文本。它与<input>元素关联,提高可访问性。
  
   <label for="email">Email:</label>
  
   <input type="email" id="email" name="email">
  
  1. <select>标签:用于创建下拉列表,让用户从预定义的选项中选择一个。
  
   <select name="country">
  
     <option value="usa">USA</option>
  
     <option value="canada">Canada</option>
  
     <option value="mexico">Mexico</option>
  
   </select>
  
  1. <textarea>标签:用于多行文本输入。
  
   <textarea name="message" rows="4" cols="50"></textarea>
  
  1. <button>标签:除了<input type="submit">之外,还可以使用<button>标签创建自定义按钮。
  
   <button type="button" onclick="alert('Hello!')">Click me</button>
  
  1. <div><span>标签:用于对表单元素进行分组和布局,但它们本身不是表单的一部分。

请注意,这些元素可以组合使用,以创建复杂的表单结构。在实际应用中,还需要考虑其他因素,如表单验证、响应式设计等。