7.14表单

今天和大家分享一些表单学习的心得

一、表单

1、什么是表单

2、form标签

定义：

form标签是一个用于存储表单元素的区域；

form只是一个大的区域，里面提供数据输入和采集的是很多**表单控件元素**完成的。

写法：

<form action="地址" method="get" target="_blank" name="表单名">
  <!-- 各种表单控件元素 -->
</form>

action标签属性 --- 表单提交时，应该往哪个地址提交

method标签属性 --- 表单提交数据的方式，一般有两种 get 和 post

target标签属性 --- 提交数据后，后端返回的新页面在哪里打开，取值和a里面的target一样

name标签属性 --- 表单名

3、表单控件

表单控件的作用是采集用户的数据然后提交到后端，所以所有的控件都必须有name及value属性，并且除了单选和多选之外，所有的控件name都不能相同。

input元素是个单标签，它的标签属性type的不同，可以使它的意义不同：

<!-- case 1 : 单行文本输入框  value属性为输入的内容，所以可以不写 -->
<input type="text" name="名字" placeholder="这里可以写提示文字" />

<!-- case 2 : 单行密码输入框  value属性为输入的内容，所以可以不写 -->
<input type="password" name="名字" />

<!-- case 3 : 单选按钮，一组选项name必须相同，value必须不同（value值随便定义），一般需要后面写文字辅助选择 -->
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="Country" value="0" />中国
<input type="radio" name="Country" value="1" />美国
<input type="radio" name="Country" value="2" />日本
<input type="radio" name="Country" value="3" />其他

<!-- case 4 : 多项选择 name建议相同，传值时是所有选中项的value集合 -->
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
<input type="checkbox" name="hobby" value="网球" />网球

<!-- case 5 : 重置按钮，点击重置所有表单中所有的控件，按钮文字默认"重置"，可以定义value改变文字显示 -->
<input type="reset" />

<!-- case 6 : 空按钮，没有任何功能的空按钮，需要设置value值以供显示，一般用于js添加功能事件 -->
<input type="button" value="按钮" />  <!--或者-->  <button>按钮</button>

<!-- case 7 : 上传文件 -->
<input type="file" name="f" />

<!-- case 8 : 隐藏不显示的表单控件，用来传递附带的不需要向用户展示的信息 -->
<input type="hidden" name="hide" value="1" />

<!-- case 9 : 提交，点击之后提交该表单form的数据，默认value是"提交" -->
<input type="submit" />

css3新增input

<input type="number" />   
<!-- 数字输入框  min 数字的最小值   max 数字最大值  step倍数-->

<input type="range" />   
<!-- 数字滑块  min 数字的最小值   max 数字最大值  step倍数--> 

<input type="time" />   时间
<input type="date" />   年月日
<input type="month" />  年月
<input type="week" />   年周
<input type="color" />  颜色    

label

辅助input进行选择。

当我们进行单选或者多选时，必须点击input本身才可以选择，因为后面的文字只是一个视觉的辅助作用。我们可以通过给文字加上label标签然后将文字和input关联起来。

label的for属性与input的id属性对应，例如：

<input type="radio" name="sex" value="1" id="sex1" /><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" /><label for="sex2">女</label>

默认选中，禁止使用

默认选择：checked标签属性，单选或多选时，可以指定初始默认的已被选中的项

禁止使用：disabled标签属性，规定input禁止使用

下拉选框

select 和 option配合实现下拉选框

<!-- name规定给select  value规定给option并且不能相同 -->
<select name="days">
  <option value="none">---请选择星期---</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
  <option value="4">星期四</option>
  <option value="5">星期五</option>
  <option value="6">星期六</option>
  <option value="0">星期日</option>
</select>

size标签属性，设置给select，规定select下拉时最多能显示几个；

selected标签属性，设置给option，规定默认显示哪个option。

文本域 textarea

多行文本输入框，rows标签属性定义高度，cols标签属性定义宽度；

如果需要用来传值，同样的需要制定name属性。

表单控件分组

fieldset 和 legend配合将多个表单控件根据需要分组；

fieldset分组，legend定义组标题。

<form action="" medthod="" name="">
  <fieldset>
    <legend>注册信息</legend>
    用户名：<input type="text" name="user" />
    密  码：<input type="text" name="pwd" />
  </fieldset>
  <fieldset>
    <legend>个人信息</legend>
    姓名：<input type="text" name="name" />
    年龄：<input type="text" name="age" />
    性别：<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女
  </fieldset>
</form>