HTML学习笔记（三）

表单标签和表格标签

表单

表单的创建

表单是什么

• 表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等

表单的创建

• <form action="save.php" method="post"></form>
• 以<form>元素开始
• action属性表示表单要提交到的后台程序的网址
• method属性表示表单提交的方式，有get或post

基本控件1

单行文本框

• <input type="text" value="123">
• 使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标
• value属性表示已经填写好的值
• <input type="text" placehold="请输入姓名">
• placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值
• <input type="text" disabled>
• disabled属性表示用户不能与元素交互，即“锁死”

单选按钮

<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" checked> 女

• 使用type属性值被设置为radio的<input>元素可以创建单选按钮
• 互斥的单选按钮应该设置它们的name为相同值
• 单选按钮要有value属性值，向服务器提交的就是value值
• 单选按钮如果加上了checked属性，表示默认被选中

<label>标签

• label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮

<label>
    <input type="radio" name="sex" value="男"> 男
</label>
<label>
    <input type="radio" name="sex" value="女" checked> 女
</label>

复选框

• <input type="checkbox">
• 使用type属性值被设置为checkbox的<input>元素可以创建复选框
• 同组复选框应该设置它们的name为相同值
• 复选框要有value属性值，向服务器提交的就是value值

基本控件2

密码框

• <input type="password">
• 使用type属性值被设置为password的<input>元素可以创建密码框

下拉菜单

<select>
    <option value="alipay">支付宝</option>
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

• <select>标签表示下拉菜单，<option>是它内部的选项

多行文本框

• <textarea></textarea>表示多行文本框
• rows和cols属性，用于定义多行文本框的行数和列数

input类型总结

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
button	普通按钮
submit	提交按钮
reset	重置按钮

HTML5中新增的表单控件

更丰富的input种类

type属性值	控件
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件

<datalist>控件

• 控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时，将会显示智能感应
• 将<select>标签改为<datalist>，再在<datalist>后面加上id
• 在<datalist>前加上<input type="text" list="id">，list中的id对应<datalist>中id的值

<input type="text" list="pay">
<datalist id="pay">
    <option value="alipay">  <!-- 支付宝</option> 若不需要释义可删去-->
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

表格

表格标签

<table>、<tr>和<td>标签

标签	意义
table	表格
tr	table row 表格行
td	table data 表格数据

<table>的border属性

• 表格的边框
• <table border="1"></table>

<table>的caption属性

• 表格的标题，常常作为table的第一个子元素出现

<th>标签

• 是“标题小格”，可以替代的作用，表示标题小格

<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
</table>

单元格的合并

colspan属性

• 用来设置td或者th的列跨度

<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th colspan="2">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>A</td>
        <td colspan="3">B</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
</table>

rowspan属性

• 用来设置td或者th的行跨度

<table border="1">
   <caption>我是标题</caption>
   <tr>
       <th>1</th>
       <th>2</th>
       <th>3</th>
       <th rowspan="3">4</th>
   </tr>
   <tr>
       <td>A</td>
       <td rowspan="2">B</td>
       <td>C</td>
   </tr>
   <tr>
       <td>E</td>
       <td>G</td>
   </tr>
</table>

表格的其他特性

<thead>、<tbody>、<tfoot>标签

• 作用：使代码更清晰
• <thead>标签定义表头
• <tbody>标签定义表核心内容
• <tfoot>标签定义表脚，通常是会汇总行

<table border="1" width="400">
    <thead>
        <tr>
            <th colspan="2"></th>
            <th colspan="2">第一季度</th>
            <th colspan="2">第二季度</th>
            <th colspan="2">第三季度</th>
            <th colspan="2">第四季度</th>
        </tr>
        <tr>
            <th colspan="2"></th>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
            <th>国内</th>
            <th>国外</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="2">手机</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th colspan="2">农产品</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th colspan="2">水产品</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">汇总</th>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
        </tr>
    </tfoot>
</table>