HTML 表单

在本 HTML 教程中，您将学习有关 HTML 中表单标签的所有知识。我们还将讨论不同的表单输入控件和表单属性。

HTML 中表单的用途是什么？

当我们想要从用户那里收集信息时，HTML 表单是必不可少的。例如，在用户注册过程中，您可能需要收集用户姓名、电子邮件地址、电话号码等信息。表单会从 Web 用户那里收集信息，然后将其发送到后端应用程序，如 CGI 或 PHP 脚本等。后端应用程序将根据应用程序内部建立的需求逻辑，对提供的数据进行必要的处理。文本字段、文本区域字段、下拉菜单、单选按钮、复选框和其他表单组件都是可能的。

HTML 中有哪些表单标签属性？

HTML 中使用了哪些表单标签？

HTML 中的 <form> 元素

HTML 中的 <form> 元素用于创建一个接受用户输入的文档区域。它有许多用于向 Web 服务器发送数据的交互功能，例如输入字段、文本区域、密码字段等。

<form>  
//Form elements  
</form>  
 

HTML 中的 <input> 元素

HTML 中的 <input> 元素是一个基本的表单元素。它用于构建接受用户输入的表单字段。我们可以利用多种输入字段来从用户那里收集不同的信息。

<form>  
  Name:
  <input type=“text”  name=“username”>
</form>  
 

HTML 中的 <textarea> 元素

HTML 中的 <textarea> 元素是一个基本的表单元素。它用于从用户那里获取多行输入。可以使用 "rows" 或 "cols" 属性或使用 CSS 来指定 <textarea> 的大小。

<form>  
  Address:<br>
  <textarea name=“address” cols=25 rows=5></textarea>
</form>  

 

HTML 中的 <label> 元素

HTML 中的 < label > 元素是一个基本的表单元素。它用于为表单输入控件提供标签。

<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</form>
 

HTML 表单中的各种输入控件类型

input 元素中的 type 属性用于指定 HTML 表单中各种类型的输入控件。

HTML 表单中的输入文本字段

一个单行输入文本字段由 type 为 "text" 的 <input> 元素定义。默认情况下，input 元素的类型就是文本。

<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</form>
 

HTML 表单中的密码字段

type 为 "password" 的 <input> 元素允许用户在网站中安全地输入密码。密码字段中提供的文本会被转换为 "*" 或 "."，这样其他用户就看不到了。

<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password">
</form>  
 

HTML 表单中的提交按钮

当点击事件发生时，type 为 "submit" 的 <input> 元素定义了一个将表单发送到服务器的提交按钮。

<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password"><br>
  <input type="submit">
</form>  
 

HTML 表单中的重置按钮

input type "reset" 也被指定为一个按钮，但是当用户触发点击事件时，它会默认重置所有输入的值。

<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password"><br>
  <input type="submit">
  <input type="reset">
</form>  
 

HTML 表单中的单选按钮

单选按钮由 <input> type "radio" 定义，它允许用户从一组相关选项中选择一个。在任何时候，只能选择一个单选按钮选项。

<form>  
  Select Your Favourite Programming Language <br>
  <input type="radio" name="lang" value="python">Python <br>
  <input type="radio" name="lang" value="js">JavaScript <br>
  <input type="radio" name="lang" value="php">PHP <br>
  <input type="radio" name="lang" value="java">Java <br>
</form>  
 

HTML 表单中的复选框

<input> type "checkbox" 表示为可以选中或取消选中的方框，用于从列表中选择选项。

<form>  
  Select Your Favourite Programming Languages <br>
  <input type="checkbox" name="lang1" value="python">Python<br>  
  <input type="checkbox" name="lang2" value="js">JavaScript<br>  
  <input type="checkbox" name="lang3" value="php">PHP<br>  
  <input type="checkbox" name="lang4" value="java">Java<br>  
</form>  
 

HTML 表单中的按钮

input type "button" 指定了一个基本的推送按钮，可以配置它来控制一个功能性事件，如点击事件。

<form>        <input type="button" value="I am a Button"  are learning HTML')">  
</form>

 

HTML 字段中的日期字段

该<input>type 为 "date" 的元素会创建一个输入字段，允许用户以特定格式输入日期。日期可以通过文本字段或日期选择器界面输入。

<form>  
     <input type="date">  
</form>