菜鸟教程
教程 html tutorial

表单元素

HTML 表单用于收集用户输入的信息，并通过提交将数据发送给服务器处理。表单由 <form> 标签包裹，内部包含多种输入控件。

基本结构

html 
<form action="/submit" method="post">
  <!-- 表单控件放在这里 -->
</form>
  • action：指定表单数据提交的目标地址。
  • method：提交方式，常用为 get 或 post。

常用表单元素

  • 文本输入框 <input type="text">
html 
<label>姓名：<input type="text" name="username" /></label>
  • 密码框 <input type="password">
html 
<label>密码：<input type="password" name="password" /></label>
  • 单选按钮 <input type="radio">
html 
<label><input type="radio" name="gender" value="male" /> 男</label>
<label><input type="radio" name="gender" value="female" /> 女</label>
  • 复选框 <input type="checkbox">
html 
<label><input type="checkbox" name="hobby" value="reading" /> 阅读</label>
<label><input type="checkbox" name="hobby" value="music" /> 音乐</label>
  • 下拉菜单 <select>
html 
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>
  • 多行文本框 <textarea>
html 
<textarea name="message" rows="4" cols="30"></textarea>
  • 提交按钮 <input type="submit">
html 
<input type="submit" value="提交" />

通过组合不同的表单控件，可以构建功能丰富的用户交互界面，如登录表单、注册页面、搜索栏和留言板等。

相关内容