HTML

HTML 知识量:9 - 26 - 70

8.1 表单简介><

表单是什么- 8.1.1 -

表单在网页中主要是指<form>元素,它是HTML(HyperText Markup Language,超文本标记语言)中用于创建用户输入界面的一部分。表单通常包含各种输入元素,如文本框(<input type="text">)、密码框(<input type="password">)、复选框(<input type="checkbox">)、单选按钮(<input type="radio">)、提交按钮(<input type="submit">)等。

表单的主要作用是收集用户的输入数据,并将这些数据发送到服务器进行处理。当用户填写完表单并点击提交按钮后,表单数据会被发送到在表单标签(<form>)的action属性中指定的URL地址,同时表单数据的发送方式(GET或POST)由method属性指定。

在服务器端,可以使用各种服务器端脚本语言(如PHP、Python、Ruby等)来接收和处理这些表单数据,然后根据需要对数据库进行更新、发送电子邮件、生成报告等操作。

表单标签- 8.1.2 -

在HTML中,表单标签有5种:form、input、textarea、select和option。

  1. <form> 标签:
    form 标签用于定义HTML表单以收集用户输入。它包含了表单的各种元素,如文本框、按钮等,并定义了表单数据提交时的目标地址(action属性)和提交方式(method属性,通常是GET或POST)。

  2. <input> 标签:
    input 标签用于创建各种类型的输入控件,如文本框、密码框、复选框、单选按钮、按钮等。通过type属性来指定输入类型,如text、password、checkbox、radio、submit等。

  3. <textarea> 标签:
    textarea 标签用于创建多行文本输入框,让用户可以输入更长的文本。与input文本框元素不同,textarea可以包含多行文本,并且通常有一个可调整大小的文本框。

  4. <select> 标签:
    select 标签用于创建下拉列表框。它包含多个option元素,每个option元素代表一个可选的值。用户可以从下拉列表中选择一个或多个选项。

  5. <option> 标签:
    option 标签定义了下拉列表框(select)中的每一个选项。每个option元素都有一个value属性,该属性表示当选项被选中时提交到服务器的值,以及text属性(通常直接包含在option标签内),该属性定义了用户在界面上看到的文本。

下面是一个包含这些标签的简单表单示例:

<form action="/submit" method="post">  
  <label for="fname">名字:</label>  
  <input type="text" id="fname" name="fname"><br>  
    
  <label for="lname">姓氏:</label>  
  <input type="text" id="lname" name="lname"><br>  
    
  <label for="message">留言:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br>  
    
  <label for="cars">选择一辆车:</label>  
  <select id="cars" name="cars">  
    <option value="volvo">Volvo</option>  
    <option value="saab">Saab</option>  
    <option value="mercedes">Mercedes</option>  
    <option value="audi">Audi</option>  
  </select><br>  
    
  <input type="submit" value="提交">  
</form>

在这个例子中,表单包含了文本输入框、多行文本输入框、下拉列表框和一个提交按钮。当用户填写表单并点击提交按钮时,表单数据将按照<form>标签中定义的action和method属性发送到服务器。具体显示效果如下:

Snipaste_2024-02-20_17-35-39.png