HTML 表单内容-详解

这篇文章距离上次修改已过450天，其中的内容可能已经有所变动。

在HTML中，表单（form）是用于收集用户输入信息的重要元素。表单内的数据通过HTTP协议提交到服务器，服务器端的脚本（如PHP、Python脚本等）可以处理这些数据。

以下是一些常用的表单元素及其属性：

<form>：定义表单
- action：规定当提交表单时向何处发送数据（服务器的URL）
- method：规定如何发送数据（通常为get或post）
<input>：定义输入框
- type：指定输入类型（text, password, radio, checkbox, submit等）
- name：定义输入字段的名称
- value：规定输入字段的初始值
- checked：规定输入是否被选中（用于radio或checkbox类型）
<label>：定义标签，关联表单元素
- for：规定标签绑定的表单元素的ID
<select>：定义下拉选择列表
- <option>：定义下拉列表的选项
<textarea>：定义多行文本输入控件
<button>：定义可点击的按钮
<fieldset>：定义一组相关的表单元素，并使用边框
- <legend>：定义<fieldset>的标题
<datalist>：定义选项列表，与输入字段配合使用（HTML5新标签）
<output>：定义不同类型的输出，如脚本的输出（HTML5新标签）

以下是一个简单的HTML表单示例：




<!DOCTYPE html>
<html>
<body>
 
<h2>简单的表单</h2>
 
<form action="/submit_form" method="post">
  姓名：<input type="text" name="username"><br>
  密码：<input type="password" name="password"><br>
  年龄：<input type="number" name="age"><br>
  性别：
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br>
  爱好：
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">阅读</label>
  <input type="checkbox" id="coding" name="hobby" value="coding">
  <label for="coding">编程</label><br>
  居住城市：
  <select name="city">
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
    <option value="guangzhou">广州</option>
  </select><br>
  意见：<textarea name="suggestion" rows="5" cols="33">在这里写下您的建议...</textarea><br>
  <input type="submit" value="提交">
</form> 
 
</body>
</html>

在这个例子中，我们创建了一个表单，用户可以输入姓名、密码、选择性别和爱好，提交后数据会通过POST方法发送到服务器的/submit_form路径。这个表单还包含了一个下拉列表、多行文本输入框和提交按钮。

HTML 表单内容-详解

评论已关闭

推荐阅读