第四十三课 表单标签-input

表单：专门用来收集用户信息
表单元素：
在HTML中 标签／标记／元素都是指HTML的标签

例如：<a> a标签／a标记／a元素
表单元素也是HTML中的标签，但是有特殊的外观和默认的功能

表单的格式：

<form>
<表单元素>
</form>

常见的表单元素：

input标签：他有一个type属性，可以有很多类型，取直不同，功能和外观不同
value：默认值
type：
text明文输入框；
password暗文输入框；
radio单选框

注意点

单选框不是互斥的，必须添加设置name属性，同时name必须相同；
默认选中，设置checked=“checked”，在HTML中取值和属性的名字一样，即可以只写一个，但建议写上；
同时设置checked以最后一个为准
checkbox多选框，默认选中设置checked

第四十四课 表单标签按钮

input 按钮
type:

1. button普通按钮，通过value设置按钮标题，作用：配合JS完成一些操作
2. image图片按钮，src属性设置图片，作用：配合JS完成一些操作
3. reset重置按钮，作用：清空表单中已经填写好的数据，默认标题“重置”，可以空过value修改
4. submit提交按钮，作用：将表单中内容提交到远程服务器

注意点：

需要给form添加action属性，设置需要提交到的服务器地址
同时需要给提交到服务器的表单元素添加一个name属性
hidden隐藏域，作用：配合提交按钮，将一些数据默默的提交的服务器 通过name和value设置 Ajas

第四十五课 label标签

将文字和输入框绑定

1、将文字利用label标签包裹起来
2、给输入框添加一个ID属性
3、在label标签中通过for属性和输入框中的id进行绑定即可

第四十六课 datalist标签 了解因为大部分浏览器不支持

datalist标签：给输入绑定待选框
格式：

<datalist>
<option>待选项</option>
</datalist>
步骤：
1、一个输入框，一个datalist列表
2、给datalist添加ID属性
3、在输入框中添加list属性，属性值是datalist的ID

第四十七课 表单标签H5 （了解）浏览器部分支持

自动检测输入内容
email
url
number
date 有日历选择器
color 有取色板

<!--http://www.520it.com/?name=名字&password=adfa&gender=on&hid=默默的-->
<!-- 表单 -->
<form class="" action="http://www.520it.com">
    name:<input type="text" name="name" value="名字"><br>
    password:<input type="password" name="password"><br>
    gender:<input type="radio" name="gender">man
    <input type="radio" name="gender">woman
    <input type="radio" name="gender" checked="checked">保密 <br>
    like:<input type="checkbox">bassketball
    <input type="checkbox">football
    <input type="checkbox" checked>woman
    <input type="button" value="按钮一般">
    <input type="image" src="0.gif">
    <input type="reset">
    <input type="submit">
    <input type="hidden" name="hid" value="默默的">
    <hr>
    <!--这种可以交叉绑定-->
    <label for="name">name:</label><input type="text" id="name">
    <!--这种不可以交叉绑定-->
    <label>
      password:<input type="text" name="">
    </label>
    <hr>
    车：<input type="text" list="cars">
    <datalist id="cars">
      <option>宝马</option>
      <option>宝骏</option>
      <option>奔驰</option>
    </datalist>
    <hr>
    email:<input type="email" name="" value="">
    number:<input type="number" name="" value="">
    url:<input type="url" name="" value="">
    date:<input type="date" name="" value="">
    color:<input type="color" name="" value="">
</form>

第四十八课 表单标签 非input标签

1、select标签：用于定义下拉列表
格式：

><select>
    <option>列表数据</option>
</select>

<select>
  <optgroup label="分组名称">
    <option>列表数据</option>
  </optgroup>
</select>

注意点：

1、下拉列表不能输入内容，但是可以直接在列表中选择内容
2、可以通过给option标签加一个selected属性来指定默认值
3、可以通过optgroup分类

<!-- 选择器 -->
<select class="" name="">
  <option value="">上海</option>
  <option value="">北京</option>
  <option value="">砀山</option>
</select>
<select class="" name="">
  <optgroup label="上海">
    <option value="">浦东新区</option>
    <option value="">浦西</option>
  </optgroup>
  <optgroup label="其他">
    <option value="">北京</option>
    <option value="">广东</option>
  </optgroup>
</select>

textarea标签：定义一个多行输入框
格式：

<textarea>
</textarea>

注意点：

1、默认情况下输入框可以无限换行
2、默认情况下输入框有自己的宽度和高度
3、可以通过cols和rows来指定输入框的宽度和高度
但是还是可以无限往下输入
4、默认情况下输入框是可以手动拉伸的，可以CSS控制

<!-- 文本框 -->
<textarea name="name" rows="8" cols="80"></textarea>

第四十九课 表单练习

<!-- 表单 -->
<form  action="http://www.520it.com">
  <fieldset>
    <legend>注册界面</legend>
    <p>
      账号：
      <input type="text" name="account">
    </p>
    <p>
      密码：
      <input type="password" name="pwd">
    </p>
    <p>
      性别：
      <input type="radio" name="gender" value="male">男
      <input type="radio" name="gender" value="female">女
      <input type="radio" name="gender" value="gay">保密
    </p>
    <p>
      爱好：
      <input type="checkbox" name="like" value="basketball">篮球
      <input type="checkbox" name="like" value="football">足球
      <input type="checkbox" name="like" value="amasy">足浴
    </p>
    <p>
      简介：
      <textarea name="desc" rows="8" cols="80"></textarea>
    </p>
    <p>
      生日：
      <input type="date" name="birthday">
    </p>
    <p>
      邮箱：
      <input type="email" name="email">
    </p>
    <p>
      手机：
      <input type="tel" name="tel">
    </p>
    <input type="submit" value="注册"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="reset" value="清空">
  </fieldset>
</form>
<!-- http://www.520it.com/?account=adfadf&pwd=%26nbsp&gender=male&like=basketball&like=football&like=amasy&desc=%E6%89%93%E5%8F%91%E6%89%93%E5%8F%91%E5%BF%AB%E4%B9%90%E7%9A%84%E7%BD%9A%E6%AC%BE%E5%8A%9B%E5%BA%A6&birthday=2017-09-12&email=afad%40d.com&tel=13423234323 -->

多选按钮和单选按钮一样，指定统一的name
除了提交和重置按钮，其他按钮可以通过设置value来设置传给服务的值

fieldset标签给表单添加一个边框

<form action="">
  <fieldset>
    <legend>表单边框的标题</legend>
    <input type="text">
  </fieldset>
</form>

内容参考