11月2日随堂笔记-表格

1.表格简介

HTML中的表格可以大致分为三个部分：
thead ———表格的页眉
tbody ———表格的主体
tfoot ———定义表格的页脚

thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。
这个标签就是放在三间房子里面的东西，每一个 就是表格一行。
表格的每一行被分为一个个单元格。

我们简单尝试写一个表格：

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
的使用
标签用于对表格中的列进行组合，以便对其进行格式化。
标签规定了 元素内部的每一列的列属性。

职位名 工作地点 职位等级 薪酬
咖啡师 纽约 L3 6000$咖啡师助理 伦敦 L2 5000$
大中华区副总裁 北京 L8 面议
全球副总裁 佛罗伦萨 L9 面议
3.合并单元格和表格的间距 colspan属性：合并列 rowspan属性：合并行 以上两个属性均作用在单元格上，并且属性值的数字代表算上单元格本身，一共合并的单元格个数。
第一行第一列 第一行第二列
第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
cellpadding属性：单元格边框与内容的间距。
cellspacing属性：单元格之间的间距。

第一行第一列 第一行第二列
第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
3.1 表单域的原理

用之前学习的标签，我们暂时还不能完成与网页的交流，网页无法获取我们的输入信息。
在浏览网页时，有很多的场景需要用户输入来完成特定的交互，比如注册、登录、问卷调查等，我们可以使用表单来完成这些操作。

1.什么是表单

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单在网页中主要负责采集数据。

：标签是成对出现的，以开始，以结束。 action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 method：数据传送的方式（get/post）。 表单中还包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、提交按钮和文件上传框等。 3.2 文本框和密码框 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
type：当type=”text”时，输入框为文本输入框，当type=”password”时,输入框为密码输入框。
name：告诉服务器，我们提交的这个value值代表的什么。
value：为文本输入框设置默认值。(一般起到提示作用)。

3.3 单选框和复选框

在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

type:当type=”radio”时，控件为单选框。当type=”checkbox”时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：告诉服务器，我们提交的这个value值代表的什么。
checked：当设置checked=”checked”时，该选项被默认选中。

3.3 下拉列表框

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
value：提交数据到服务器的值。
selected=”selected”：设置selected=”selected”属性，则该选项就被默认选中。
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。

多行文本和重置按钮

多行文本
当用户需要在表单中输入大段文字时，需要用到文本输入域。
文本
标签是成对出现的，以开始，以结束。
name：指定输入框的名字。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在标签之间可以输入默认值。
2.上传

在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。
在HTML中，文件上传同样也使用input标签。
提交按钮和重置按钮

3.6 提交按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。当我们需要重置表单信息的时候，需要用到重置按钮。
提交按钮

type：只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。

3.7 提交按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。

type：只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。

3.8 为CODING COFFEE加入在线购买页面

大家还记得CODING COFFEE咖啡馆吗？现在，它非常火爆，很多顾客排队也买不到咖啡。
所以，我们打算在网上接收咖啡的订单，送货上门！
试着使用表单获取用户的订单信息！

<h1>CODING COFFEE在线订购</h1>
<h2>请填写您的真实信息，我们将在24小时内送货门</h2>

<form action="http://codingcoffee.com/onlineorder.php" method="post">
    <p>
                选择豆子类型：
                  <select name="beans">
                    <option value="House Blend">House Blend</option>
                    <option value="Bolivia">Shade Grown Bolivia Supremo</option>
                    <option value="Guatemala">Organic Guatemala</option>
                    <option value="Kenya">Kenya</option>
                  </select>
    </p>
    <p>
                  类型:<br>
                  <input type="radio" name="beantype" value="whole">
                  完整豆子
                  <br>
                  <input type="radio" name="beantype" value="ground" checked> 
                  咖啡粉
    </p>
    <p>
            数量: <input type="number" name="bags" min="1" max="10">
    </p>
    <p>
            最晚到达日期: <input type="date" name="date">
    </p>
    <p>
                Extras:<br>
                  <input type="checkbox" name="extras[]" value="giftwrap">
                  礼盒包装
                  <br>
                  <input type="checkbox" name="extras[]" value="catalog" checked>
                  包含购物清单
    </p>
    <p>
                  送货地址: <br>
                  姓名:
                    <input type="text" name="name" value=""><br>
                  具体地址:
                    <input type="text" name="address" value=""><br>
                  城市:
                    <input type="text" name="city" value=""><br>
                  省:
                    <input type="text" name="state" value=""><br>
                  区:
                    <input type="text" name="zip" value=""><br>
                  电话号码:
                    <input type="tel" name="phone" value=""><br>
    </p>
    <p>
                  客户留言:<br>
                  <textarea name="comments"></textarea>
    </p>
    <p>
                  <input type="submit" value="现在购买">
                  <input type="reset" value="重新填写">
    </p>
  </form>