close

Form HTML 简介：结构、输入类型和示例

HTML form 是 Web 开发的重要组成部分，它允许用户与网站交互并向服务器提交数据。 Form 用于广泛的目的，例如收集用户信息 form 、处理用户输入以及在网站上启用用户操作。 在本文中，我们将探讨 HTML 中常用的属性和不同类型的输入字段、选择元素、文本区域和按钮 form。

输入字段

  • <input type="text"> ：创建一个文本输入字段，用户可以在其中输入字母数字字符。
  • <input type="password"> ：显示密码输入字段，屏蔽输入的字符。
  • <input type="email"> ：为需要有效电子邮件地址的输入字段提供电子邮件验证。
  • <input type="number"> ：仅限输入数值。
  • <input type="checkbox"> ：代表用户可以选择或取消选择的复选框。
  • <input type="radio"> ：代表一个单选按钮，允许用户从一组选项中选择一个选项。
  • <input type="file"> ：允许用户选择和上传文件。
  • <input type="submit"> form ：显示一个单击时 提交的按钮。
  • <input type="reset"> ：显示一个按钮，可将 重置 form 为其初始状态。
  • <input type="date"> ：提供日期选择器用于选择日期。
  • <input type="time"> ：允许用户输入时间值。

选择元素

  • <select> ：创建带有可选选项的下拉菜单。
  • <option> ：定义下拉菜单中的选项，放置在 <select> 标签内。
  • <optgroup> ：将下拉菜单中的相关选项分组在一起。
  • <select multiple> ：允许用户通过在单击时按住 Ctrl 键（或 Mac 上的 Command 键）来同时选择多个选项。

文本区域

<textarea> ：创建多行文本输入字段，用户可以在其中输入和编辑较长的文本块。 它可以调整大小并配置诸如 rows 和 等属性 cols 来定义其尺寸。

纽扣

<button> ：代表一个按钮，可以触发 中的各种操作 form。 它可用于 form 根据 form JavaScript 函数提交, 或导航到不同的页面。

用法示例： 

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

form 此示例展示了各种元素 的用法，包括 input 字段、 textarea、 checkbox 和 select dropdown 按钮 submit。 您可以 form 根据您的具体要求随意自定义元素和属性。