html5学习笔记(4)

表单标签

表单的创建

表单是什么

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

表单的创建

所有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属性值不同

type属性值	按钮种类
button	普通按钮，可以简写为<button></button>
submit	提交按钮
reset	重置按钮

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

input类型总结

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
button	普通按钮
reset	重置按钮
submit	提交按钮

HTML5中新增的表单控件

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

 <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>