表格与表单

---

前言

观察每个网页，或多或少都可以看到表格、表单的存在，例如登陆界面等等，表格多用于局部布局排版，表单用于向服务器发送数据。

---

一、表格< table>

• 表格的各个组成部分都要包含在< table>标签内
• 表格有三个部分，thead、tbody、tfoot三个部分，它们可以对表格进行分组，分组可以使浏览器有能力支持独立表头和表尾的表格正文滚动
• thead可以不只是一行
• 行标签**< tr>，表示一行**
• 单元格是表的基本元素，可以通过< td> 或者< th>来表示，< td>标签包含表格中的数据部分，< th>标签包含表格中的标题部分
• 这里是通过rowSpan和colspan来指定单元格跨多少航或多少列
• 在页面中显示空白单元格时，需要在单元格标签内加入空白实体引用，即< td> &nbsp；< /td>，来保证浏览器能正确显示该单元格

<table border="1">
        <thead>
        <tr>
            <th>班级</th>
            <th>分组</th>
            <th>学生</th>
            <th>随便</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="6">葵花班</td>
            <td rowspan="3">A组</td>
            <td>张三</td>
            <td>1</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">王五</td>
        </tr>
        <tr>
            <td rowspan="3">B组</td>
            <td colspan="2">孙六</td>
        </tr>
        <tr>
            <td>韩七</td>
            <td>3</td>
        </tr>
        <tr>
            <td>鲁八</td>
            <td>4</td>
        </tr>
        <tr>
            <td rowspan="6">莲花班</td>
            <td rowspan="3">A组</td>
            <td colspan="2">Alice</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Charles</td>
            <td>6</td>
        </tr>
        <tr>
            <td rowspan="3">B组</td>
            <td colspan="2">孙六</td>
            
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td>鲁八</td>
            <td>4</td>
        </tr>
        </tbody>
    </table>

二、表单< form>

• 表单用来采集和提交用户输入的信息。表单主要分为表单标签和表单控件两大类。
• 表单控件又可以细分为表单域和按钮两部分。常用的表单域有文本框、密码框、多行文本框、单选按钮、复选框、下拉选框等。
• 用户在表单域输入信息后，可通过提交按钮将数据传递给服务器端。

1、表单标签< form>

<form action="处理数据程序的URL地址" method="get|post" name="表名称" ...></form>

• 属性action、method、name是表单常用的三个属性
• method属性表示将表单中的数据传递给服务器进行处理，有 get 和 post 两种方式
• get 方式和 post 方式的区别：
  • get 将数据作为URL的一部分发给服务器，请求数据会出现在URL中，安全性较低URL地址栏长度有限，最长不能超过255,所以get方式有长度限制。get的请求数据可以被缓存，保存在历史记录里，也可以作为书签被收藏。
  • post 将数据藏在HTTP的数据流中进行传输 ，请求数据不会出现在地址栏中，安全性比get方式高，对数据长度没有限制。请求数据不会被缓存，也不会在历史记录中保存，更不能被收藏为书签，当单击后退或者刷新按钮时，数据会被重复提交 。

2、表单域

（1）单行文本框<input type="text">

• 通过< input>标签的type属性设置为text方式来创建，placeholder设置提示信息

（2）密码框<input type="password">

• 输入的内容是***或者其他符号的掩码形式，但在数据传输时，仍然是明文的方式发送到服务器。

（3）单选按钮<input type="radio">

• 具有相同name属性的单选按钮分为一组，在一组数据中只能选择一个。
• 同一组内的value值不应相同。
• 通过checked="checked"可以将当前选项设置为默认选项，有多个checked时，最后一个为默认选项。

（4）复选框<input type="checkbox">

• 具有相同name属性的复选框分为一组，一组数据允许用户选择一个或多个

（5）文件选择框<input type="file">

• 上传文件时，需要使用文件选择框来选择上传文件

（6）多行文本框<textarea> </textarea>

• 用来输入较长内容的文本输入控件，使用< textarea> 标签进行定义，属性rows 多行文本框的行数 cols 多行文本框的宽度，单位是字符
• 属性wrap用来指定多行文本框的换行方式，

值	描述
off	默认值，会添加滚动条
virtual	文本的自动换行，但在传输给服务器，文本只有在用户按回车键的地方换行
physical	文本的自动换行，并以这种方式传给服务器

（7）下拉列表选择框< select> 和 < option>

• 列表选择框使用< select>标签定义，一个列表可以包含多个列表项< option>
• multiole属性 当前列表是否支持Ctrl键进行多选，不设置默认只能选一项
• < option>标签的selected="selected"用于设置当前选项默认被选

3、按钮控件

• 按钮：<input type="button" value="普通按钮"> 或者 <button>按钮</button>
• <button></button>什么都不写，默认为提交
• <button type="button"></button>普通按钮，不具备提交功能
• <button type="reset"></button>重置按钮
• <button type="submit"></button>提交按钮
• 图片按钮：<input type="image" src="...">
• 提交的时候，以key-value的形式提交，key就是name属性，value就是输入框中输入的数据：

<form>
        <input type="text" name="some-key">
        <button>提交</button>
    </form>

4、表单分组 < fieldset> 和< legend>

• < fieldset>标签将所包含的内容以边框环绕方式显示，< legend>为< fieldset>标签添加标题

<form>
        <fieldset>
            <legend>请选择个人爱好</legend>
                <input type="checkbox" name="hobby" value="music" />音乐  <br>
                <input type="checkbox" name="hobby" value="swimming" />游泳  <br>
                <input type="checkbox" name="hobby" value="football" />足球  <br>
        </fieldset>
    </form>

小结

<form action="/java">
        <label for="xm"></label> 姓名：<input type="text" id="xm" placeholder="请输入姓名"><br>
        密码：<input type="password" placeholder="请输入密码"><br>
        性别：<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female" checked>女<br>
        <fieldset>
            <legend>请选择个人爱好</legend>
                <input type="checkbox" name="hobby" value="music" />音乐  <br>
                <input type="checkbox" name="hobby" value="swimming" />游泳  <br>
                <input type="checkbox" name="hobby" value="football" />足球  <br>
        </fieldset>
    
        籍贯：<select name="home" id="home">
            <option value="shanxi">陕西省</option>
            <option value="sichuan">四川省</option>
            <option value="zhejiang">浙江省</option>
        </select>
        <br>
        评价：<br>
        <textarea name="评价" id="message" cols="40" rows="4">踏实认真的学习态度，积极主动的工作作风，热情大方的待人原则，艰苦朴素的生活习惯塑造了我独特的个性和人生追求，培养了我正确的人生观，世界观，价值观，使我能 乐观 面对生活和工作并取得理想的成绩。</textarea>
        <input type="submit" value="提交">
    </form>