HTML表单标签

HTML表单标签

1. 表单标签概述

• 表单标签：用于在网页中创建可交互的元素，如文本框、下拉框、按钮等。

• 标签：所有表单元素需要放在标签内，类似于

  包裹
  • 。

  2. 标签

  • 标签：通过type属性可以切换不同的输入类型。

    • type="text"：普通文本框。

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

    • type="checkbox"：复选框，用于多选。

      
      苹果
      
      
      
      香蕉
      
      
      
      樱桃
      
      
      

      • label for关联了 id 和选项文本。例如当用户点击 “苹果” 这个文本时，相当于点击了对应的复选框（id 为 “apple” 的）。

      • name 属性设置为 fruit，表示它们属于同一组复选框。

    • type="radio"：单选框，用于单选。

      
      男
      
      女
      

    • type="file"：文件选择框，允许用户选择文件。

      • accept属性：限制用户选择的文件类型，如image/*表示只允许选择图片文件。

    • type="hidden"：隐藏输入框，用户不可见，但数据会随表单提交。

    • type="submit"：提交按钮，点击后提交表单。

    • type="reset"：重置按钮，点击后重置表单内容。

    • type="button"：普通按钮，通常与JavaScript配合使用。

    • type="image"：图片按钮，功能与提交按钮相同，但显示为图片。

  3. HTML5新增的类型

  • type="number"：数字输入框，只能输入数字。

  • type="email"：邮箱输入框，要求输入合法的邮箱地址。

  • type="date"：日期选择框，允许用户选择日期。

  • type="time"：时间选择框，允许用户选择时间。

  • type="url"：URL输入框，要求输入合法的URL。

  • type="range"：范围选择滑块，允许用户选择一个范围内的值。

  • type="color"：颜色选择框，允许用户选择颜色。

  4. input标签的常用属性

  • value属性：用于设置输入框的初始内容或按钮上的文字。

  • disabled属性：禁用输入框或按钮，用户无法编辑或点击。

  • 示例：

  • maxlength和minlength属性：限制输入框内容的长度。

  • 示例：

  • placeholder属性：设置输入框的占位符，提示用户输入内容。

  • 示例：

  • autofocus属性：页面加载后，光标自动聚焦到该输入框。

  • 示例：

  • tabindex属性：设置按Tab键时光标的跳转顺序。

  • 示例：

    • 设置了tabindex属性的元素比没有设置该属性的元素光标跳转顺序靠前。

  • name属性：

    • 用于标识表单字段的名称，表单提交时会将该名称与用户输入的值一起发送到服务器。

    • 示例：

    • 表单提交时，数据会以name=value的形式发送到服务器。

    • method为get时，表单数据会以name=value的形式拼接在URL后面，多个字段用&分隔。提交后url会变成：

      /submit?username=张三&age=25

  • HTML5表单验证：浏览器会自动对输入内容进行基本验证。

    • required属性：表示该字段必填。

    • pattern属性：使用正则表达式验证输入内容。

  5. 标签

  标签：用于创建下拉框。

  
      北京
      上海
  

• multiple属性：允许用户选择多个选项。

  
      阅读
      运动
  

6. </code>标签</strong></h5> <ul> <li> <p><strong><code><textarea></code>标签</strong>：用于创建多行文本输入框。</p> <pre><textarea rows="4" cols="50">

7. 表单提交

• 表单提交：点击type="submit"的按钮后，表单数据会被提交到服务器。

  • 标签的action属性：指定表单提交的URL地址。

  • 表单数据会以name=value的形式拼接在URL后面，多个字段用&分隔。

8. 表单重置

• 表单重置：点击type="reset"的按钮后，表单内容会被重置为初始状态。

9. 标签

• 标签：用于关联表单元素和文本描述，提升用户体验。

  用户名：
  
  

10. 

和

标签

• 标签：用于将表单元素分组。

• 标签：用于为

  分组添加标题。

  
      
  用户信息
      用户名：
      
  
  

---

总结：

• 表单标签：用于创建用户交互元素，如文本框、下拉框、按钮等。

• 标签：通过type属性可以创建多种输入类型，如文本、密码、复选框、单选框等。

• HTML5新增类型：如number、email、date、range等，增强了表单的功能和用户体验。

• 表单验证：HTML5提供了基本的表单验证功能，如required和pattern。

• 表单提交与重置：通过submit和reset按钮可以实现表单的提交和重置。