表单标签

表单的创建

表单是什么

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等

表单的创建

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

 <form action="">
 </form>

基本控件

单行文本框

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

• value属性表示已经填写好的值

• placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值

• disabled属性表示用户不能与元素交互，即“锁死

 <input type="text" value="123">
 <input type placeholder ="text" ="请输入姓名">
 <input type="text" disabled>

单选按钮

使用\textcolor{red}{type属性值被设置为radio的<input>元素}可以创建单选按钮

• 互斥的单选按钮应该设置它们的name为相同值

• 单选按钮要有value属性值，向服务器提交的就是value值

• 单选按钮如果加上了checked属性，表示默认被选中

 <input type="radio" name="sex" value="男" checked> 男
 <input type="radio" name="sex" value="女"> 女

label标签

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

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

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

 <input type="radio" name="bloodtype" value="A" id="A"> <label for="A">A</label>
 <input type="radio" name="bloodtype" value="B" id="B"> <label for="B">B</label>
 <input type="radio" name="bloodtype" value="O" id="O"> <label for="O">O</label>
 <input type="radio" name="bloodtype" value="AB" id="AB"> <label for="AB">AB</label>

复选框

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

 <input type="checkbox">

• 同组复选框应该设置它们的name为相同值

• 复选框要有value属性值，向服务器提交的就是value值

密码框

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

下拉菜单

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

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

多行文本框

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

rows和cols属性，用于定义多行文本框的行数和列数

<textarea> 标签的 placeholder 属性,标签中间有空格会导致不显示

 <textarea name="" id="" cols="30" rows="10"></textarea>

三种按钮

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

 <button>普通按钮</button>
 <p>
     <input type="button" value="普通按钮">
 </p>
 <p>
     <input type="submit" value="提交表单">
 </p>
 <p>
     <input type="reset" value="重置表单">
 </p>

input类型总结

HTML5中新增的表单控件

 <form action="">
     <p>
         颜色选择控件:
         <input type="color">
     </p>
     <p>
         日期选择控件
         <input type="date">
     </p>
     <p>
         时间选择控件
         <input type="time">
     </p>
     <p>
         电子邮件输入控件
         <input type="email" name="" id="">
     </p>
     <p>
         文件选择控件
         <input type="file">
     </p>
     <p>
         数字输入控件
         <input type="number" name="" id="">
     </p>
     <p>
         拖拽条
         <input type="range" name="" id="">
     </p>
     <p>
         搜索框
         <input type="search" name="" id="">
     </p>
     <p>
         网址输入控件
         <input type="url" name="" id="">
     </p>

<datalist>控件

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

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