Skip to Content

HTML表单标签

所有HTML表单都以一个<form>元素开始

  • action属性表示表单要提交到的后台程序的网址
  • method属性表示表单提交的方式，有get或post
<form action="save.php" method="post">
</form>

单行文本框

使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签

  • value属性表示已经填写好的值
  • placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值
  • disabled属性表示用户不能与元素交互，即“锁死”
<input type="text" value="123" placeholder="请输入姓名">
<input type="text" disabled>

单选按钮

使用type属性值被设置为radio的<input>元素可以创建单选按。

  • 互斥的单选按钮应该设置它们的name为相同值
  • 单选按钮要有value属性值，向服务器提交的就是value值
  • 单选按钮如果加上了checked属性，表示默认被选中
<input type="radio">

label标签

label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮

<label>
    <input type="radio"> 男
</label>
<label>
    <input type="radio"> 女
</label>

在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的

<input type="radio" id="nan"><label for="nan">男</label>

复选框

使用type属性值被设置为checkbox的<input>元素可以创建复选框

  • 同组复选框应该设置它们的name为相同值
  • 复选框要有value属性值，向服务器提交的就是value值
<input type="checkbox">

密码框

使用type属性值被设置为password的<input>元素可以创建密码框

<input type="password">

下拉菜单 <select>

<select>标签表示下拉菜单，<option>是它内部的选项

<select>
    <option value="alipay">支付宝</option>
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

多行文本框 <textarea>

<textarea></textarea>表示多行文本框

  • rows和cols属性，用于定义多行文本框的行数和列数
<textarea cols="50" rows="30"></textarea>

按钮

表单中常见三种按钮，它们也都是input标签，type属性值不同

type属性值描述
button普通按钮，可以简写为<button></button>
submit提交按钮
reset重置按钮
<input type="butten" value="按钮">
<button>按钮</button>
<input type="submit">
<input type="reset">

HTML5新增表单控件

type属性值描述
color颜色选择控件
date、time日期、时间选择控件
email电子邮件输入控件
file文件选择控件
number数字输入控件
range拖拽条
search搜索框
url网址输入控件

备选项 <datalist>

<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应

<input type="text" list="province-list">
<datalist id="province-list">
    <option value="山东">
    <option value="山西">
    <option value="广东">
    <option value="广西">
    <option value="河南">
    <option value="河北">
    <option value="湖南">
    <option value="湖北">
</datalist>

必填

使用required则表示必填

<input type="text" required>

HTML多媒体标签

Last updated on