表单与表格

1. 表单

什么是表单

form标签

• 定义

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

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

• 写法

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

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

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

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

name标签属性 — 表单名

entype 标签属性 — 设置编码格式

• 默认 application/x-www-form-urlencoded
• 上传文件设置 multipart/form-data

表单控件

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

• input

  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>

2. 表格

table标签定义一个表格，内部配合一些表格标签定义表格的内容。

很早以前，前端页面很多都是使用table来布局的，但是随着前端技术的发展内容的丰富，table的弊端体现的越来越明显，比如太规整了不符合现今网页的布局多样化，对SEO极其不友好，维护成本太大等等。所以目前来讲，使用table的情况比较少。

简单的表格

一般我们在使用表格时，需要用到的标签并不多，table、tr、th、td；

tr定义表格的行，内容都是写在行里面的；

th定义在行里面，字体会加粗，代表一列的标题；

td定义在行里面，代表每一项；

<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>阿飞</td>
    <td>夏栀</td>
    <td>风屿</td>
  </tr>
  <tr>
    <td>男</td>
    <td>女</td>
    <td>男</td>
  </tr>
  <tr>
    <td>28</td>
    <td>30</td>
    <td>27</td>
  </tr>
</table>

边框和边距

给table加上标签属性border 以使每个单元格都加上边框。该属性接收数字值，该值只能改变tabel的边框宽度，不能改变里面项目的边框宽度；

给table加上CSS样式border-collapse:collapse;以使相邻单元格的边框合并，美化样式；

给table加上标签属性cellpadding以使每个单元格都加上padding，这个属性会受CSS样式的影响；

给table加上标签属性cellspacing以使每个单元格之间加上间隙，这个效果可以用CSS属性border-spacing代替；

给td/th加上标签属性align可以设置文字对齐方式，类似于text-align的效果。

其他样式

在使用table时，我们也需要使用CSS样式来协助控制整个table的展示，例如宽高，文字大小居中加粗等等都是需要用到的。即使tabel提供的有一些标签属性控制，但是控制起来很不得心应手，除了border外，建议其它的样式都使用CSS控制。

单元格合并

rowspan 属性规定单元格纵跨的行数（纵向合并）

<td rowspan="2"></td>

colspan 属性规定单元格横跨的列数（横向合并）

<td colspan="2"></td>

表格的默认特性

在没有样式干预的情况下，表格有一些默认的特性，比如：

表格单元格里面可以继续嵌套另一个表格

一行中单元格的高度以最大的为准，一列中单元格的宽度以最大的为准；

一行中单元格的宽度按照内容多少来分配，如若有一个单元格设置了宽度，那么剩下的宽度平分给其他没设置的；

一列中单元格的高度和上面同理。

如果我们希望不是表格的元素也拥有表格的这些特性，我们可以使用display:table;相关的一些属性：

<style>
  #box{ display:table; }  /* 相当于变成 table */
  #box div{ display:table-row; } /*相当于变成 tr*/
  #box p{ display:table-cell; } /*相当于变成 td*/
</style>
<div id="box">
  <div>
    <p>姓名</p>
    <p>年龄</p>
  </div>
  <div>
    <p>张三</p>
    <p>李四</p>
  </div>
  <div>
    <p>28</p>
    <p>27</p>
  </div>
</div>

当然这么用是很蛋疼的…其实利用table的特性我们可以借此来解决一些问题，比如：左边宽度固定，右边宽度自适应剩下的：

<style type='text/css'>
    *{ margin:0; padding:0;font-family:'Microsoft yahei';}
    body{
        width:100%;
        display:table;
    }
    #a{
        display:table-cell;
        width:500px;
        height:100px;
        background:pink;
    }
    #b{
        display:table-cell;
        height:100px;
        background:red;
    }
</style>
<div id="a"></div>
<div id="b"></div>

其他表格标签

tbody 即使不写，默认也会添加这个标签去包裹所有内容；

thead、tfoot 表格头表格尾；

caption 表格标题。

<style>
    table{ border-collapse:collapse; }
</style>
<table border="1">
    <caption>2017年张三成绩统计</caption>
    <thead>
        <tr>
            <td></td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第01次</td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
        </tr>
        <tr>
            <td>第02次</td>
            <td>86</td>
            <td>85</td>
            <td>68</td>
        </tr>
        <tr>
            <td>第03次</td>
            <td>96</td>
            <td>99</td>
            <td>98</td>
        </tr>
        <tr>
            <td>第04次</td>
            <td>60</td>
            <td>50</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>xx</td>
            <td>xx</td>
            <td>xx</td>
        </tr>
    </tfoot>
</table>