表单项

大家好，欢迎来到IT知识分享网。

表单项是 HTML 表单中的重要组成部分，用户通过表单项输入或选择数据，然后将这些数据提交给服务器进行处理。以下为你详细介绍常见的表单项及其使用方法、属性等内容。

1. 文本输入框（）

这是最基本的表单项，用于让用户输入单行文本信息，比如用户名、邮箱等。

示例代码

收起

html

 
  
 
   用户名： 
    
    
  
 

常用属性

• name：用于在服务器端标识该表单项的数据。
• id：为表单项指定唯一标识符，常与 标签的 for 属性配合使用。
• placeholder：提供输入提示信息，当用户输入内容时提示信息会消失。
• value：设置表单项的初始值。

2. 密码输入框（）

用于输入密码，输入的内容会以星号或圆点等形式进行隐藏显示。

示例代码

收起

html

 
  
 
   密码： 
    
    
  
 

3. 单选框（）

用于让用户从多个选项中选择一个。一组单选框需要设置相同的 name 属性，这样才能实现单选的效果。

示例代码

收起

html

 
  
 
   请选择您的性别： 
    
   男 
    
   女 
    
  
 

常用属性

• value：当该单选框被选中时，提交给服务器的值。
• checked：可选属性，若设置该属性，则该单选框默认被选中。

4. 复选框（）

允许用户从多个选项中选择零个或多个。

示例代码

收起

html

 
  
 
   请选择您喜欢的水果： 
    
   苹果 
    
   香蕉 
    
   橙子 
    
  
 

常用属性

• value：当该复选框被选中时，提交给服务器的值。
• checked：可选属性，若设置该属性，则该复选框默认被选中。

5. 下拉列表（和）用于提供一个选项列表，用户可以从中选择一个选项。示例代码收起html 请选择您所在的城市： 北京上海广州深圳

常用属性

• 的 name：用于在服务器端标识该表单项的数据。 的 value：当该选项被选中时，提交给服务器的值。 的 selected：可选属性，若设置该属性，则该选项默认被选中。6. 文本域（）</h1><p data-track=”62″ class=”syl-page-br” style><br></p><p data-track=”63″>用于输入多行文本，比如留言、评论等。</p><h1 class=”pgc-h-arrow-right” data-track=”64″>示例代码</h1><p data-track=”65″ class=”syl-page-br” style><br></p><p data-track=”66″><span style=”color: #000000; –tt-darkmode-color: #A3A3A3;”>收起</span></p><p data-track=”67″ class=”syl-line-pure-english”>html</p><pre class=”syl-page-code”><code><form action=”#”><br /> <label for=”message”>请留言：</label><br><br /> <textarea id=”message” name=”message” rows=”5″ cols=”30″ placeholder=”请输入留言内容”>

  常用属性

  • name：用于在服务器端标识该表单项的数据。
  • rows：指定文本域显示的行数。
  • cols：指定文本域显示的列数。
  • placeholder：提供输入提示信息。

  7. 文件选择框（）

  允许用户选择本地文件进行上传。

  示例代码

  收起

  html

   
      
   
       请选择文件： 
        
        
      
   

  注意事项

  • 当表单中包含文件上传表单项时，需要将表单的 enctype 属性设置为 multipart/form-data。