HTML5基础语法与标签(四)

整体介绍

表单的创建 1)表单的创建 基本控件 1)基本控件1 2)基本控件2 3)HTML5中新增的表单控件 小慕医生项目开发 1)小慕医生项目开发

表单的创建

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

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

基本控件1

单行文本框

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

<input type=“text”>

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

<input type=“text” value=“123”>

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

<input type=“text” placeholder=“请输入姓名”>

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

<input type=“text” value=“123” disabled>

单选按钮

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

<input type=“radio”>

1. 互斥的单选按钮应该设置它们的name为相同值
2. 单选按钮要有value属性值，向服务器提交的就是value值
3. 单选按钮如果加上了checked属性，表示默认被选中

<p>
  性别：
  <input type="radio" name="sex" value="男" checked> 男
  <input type="radio" name="sex" value="女"> 女
</p>
 
<p>
  血型：
  <input type="radio" name="bloodtype"> A
  <input type="radio" name="bloodtype"> B
  <input type="radio" name="bloodtype"> C
  <input type="radio" name="bloodtype"> O
  <input type="radio" name="bloodtype"> AB
</p>

实现效果： 默认选中男，name值相同互斥，二选一

性别： 男 女

血型： A B C O AB

点击文字并不能实现选中，不利于交互

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>元素可以创建复选框

<input type=“checkbox”>

同组复选框应该设置它们的name为相同值 复选框要有value属性值，向服务器提交的就是value值

<p>
  爱好：
  <label>
    <input type="checkbox"  name="hobby"  value="足球">足球
  </label>
  <label>
    <input type="checkbox"  name="hobby"  value="篮球">篮球
  </label>
  <label>
    <input type="checkbox"  name="hobby"  value="羽毛球">羽毛球
  </label>
  <label>
    <input types="checkbox" name="hobby" value="游泳">游泳
  </label>
</p>

爱好： 足球 篮球 羽毛球 游泳

基本控件2

密码框

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

<p>
  请输入密码：
  <input type="password">
</p>

请输入密码：

下拉菜单

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

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

请选择支付方式：

支付宝 微信 网银

多行文本框

<textarea></textarea>表示多行文本框 rows和cols属性，用于定义多行文本框的行数和列数

<p>
留言：
  <textarea cols="50"  rows="5"></textarea>
</p>

留言：

三种按钮

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

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

我是一个普通按钮

HTML5中新增表单控件

<from action="">
  <p>
    颜色选择控件：
    <input type="color">
  </p>
  <p>
    日期选择：
    <input type="date">
  </p>
  <p>
    时间选择：
    <input type="time">
  </p>
  <p>
    电子邮件：
    <input type="email">
  </p>
  <p>
    必填：
    <input type="text"  required>
  </p>
  <p>
    数字：
    <input type="number"min="10"  max="20">
  </p>
  <p>
    拖拽条：
    <input type="range"  min="10"  max="20">
  </p>
  <p>
    搜索：
    <input type="search">
  </p>
  <p>
    网址：
    <input type="url">
  </p>
  <p>
    <input type="submit"  value="提交表单">
  </p>
</form>

颜色选择控件：

日期选择：

时间选择：

电子邮件：

必填：

数字：

拖拽条：

搜索：

网址：

注意：在表单中，自带校验功能，如邮箱要带@，网址要有http，若不写在表单中（即不被from标签包括），则不会发生校验

<datalist>标签

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

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

省份：