HTML学习笔记02-----表格、表单、post与get

表格
- 创建表格
- 进阶使用表格（表头、表主体、表尾的使用）
- 属性介绍
- - table属性
  - tr属性
  - td属性
表单
- 表单元素（基础）
- - 标签元素
  - 文本框
  - 密码框
  - 文本域
  - 表单中的下拉列表
  - 单选按钮
  - 复选框
  - 按钮
  - - 提交按钮
    - 普通按钮
    - 重置按钮
- 进阶使用表单
- - 表单的提交
  - post与get的区别

表格

创建表格

表格标签为

<table></table>

，表格的每一行用

<tr></tr>

表示,每一行的每一个单元格用

<td></td>

表示。

例如，创建一个2行3列的表格

<table border="1px">
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
</table>

进阶使用表格（表头、表主体、表尾的使用）

定义表头 <thead></thead> 标签定义表格的表头，用来组合表头内容，在这个标签中再使用 <th></th> 表示表格的每一个表头内容。
<tbody></tbody 用于对表格中的主体内容进行分组
<tfoot></tfoot>
元素用于对 HTML 表格中的表注（页脚）内容进行分组。

示例：

<table border="1">
    <thead>
    <tr>
        <th>商品名称</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>篮球</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>rap机</td>
        <td>$80</td>
    </tr>
    <tr>
        <td>话筒</td>
        <td>$180</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>舞蹈训练</td>
        <td>$180</td>
    </tr>
    </tfoot>
</table>

属性介绍

table属性

属性名	可选值	描述
align	left （左对齐）、center（居中）、right（右对齐）	设置表格水平对齐方式
width	默认单位为像素（px）	设置表格宽度
height	默认单位为像素（px）	设置表格高度
cellpadding	设置单元格边框与内容的距离
cellspacing	设置单元格与单元格之间的距离
frame	viod：不显示外侧边框。 box：在所有四个边上显示外侧边框。 border：在所有四个边上显示外侧边框。 above：显示上部的外侧边框。 below：显示下部的外侧边框。 hsides：显示上部和下部的外侧边框。 lhs：显示左边的外侧边框。 rhs：显示右边的外侧边框。 vsides：显示左边和右边的外侧边框	设置表格外边框的样式。
rules	none、rows、cols、all	设置表格内边框的样式
bordercolor	设置表格边框线的颜色
border	默认值：0	其值表示表格线的粗细
bgcolor	设置表格背景填充的颜色
backgroung	设置表格背景（图片填充、颜色填充）

tr属性

属性名	可选值	描述
align	left （左对齐）、center（居中）、right（右对齐）	定义表格行的内容对齐方式。
valign	top(顶部对齐)、middle（居中对齐）、bottom（底部对齐）、baseline(基线对齐)	设置当前表格行中内容的垂直对齐方式。
bgcolor	设置表格行的背景颜色

td属性

属性名	可选值	描述
width	设置单元格的宽度
height	设置单元格的高度
align	设置单元格中的内容水平对齐
valign	设置单元格中的内容垂直对齐
rowspan	设置跨行(纵向)合并单元格数，即合并第X行里的单元格
colspan	设置跨列(横向)合并单元格数，即合并第X列的单元格。
bgcolor	设置单元格背景颜色
backgroung	设置单元格的背景

表单

表单是用于提交数据使用的

使用

<form></form>

定义，所有的表单元素放在

<form></form>

标签中。

表单元素（基础）

标签元素

标签的定义：

<label></label>

，标签的作用是解释某个元素。

属性介绍

for:设置label绑定的对象，其值就是绑定对象的id值。
form:设置label字段所属的一个或多个表单，其值就是所属表单的id值

示例：使用for绑定对象，运行后单击label看看会发生什么？

<form id="user">
    <label for="userName">用户名：</label>
    <input type="text" id="userName">
</form>

文本框

文本框的定义：

<input type="text">

文本框的属性：

size：设置文本框的长度
value：设置文本框的初始内容

示例：创建一个长度为30，初始内容为“Hello”的文本框

<form>
    <input type="text" size="30" value="Hello">
</form>

密码框

密码框的定义：

<input type="password">

密码框会自动使用圆点或星号来替代显示输入的内容，但实际内容会变

示例：

<form>
    <input type="password" size="30" >
</form>

文本域

文本域相对于文本框来说，它可以输入多行的内容。

文本域使用

<textarea></textarea>

标签定义

文本域的属性：

autofocusL：值为“autofocusL”时，页面加载后文本域自动获得焦点。
cols：规定文本区内的可见宽度
disabled：规定禁用该文本区。
form ：规定文本区域所属的一个或多个表单。
maxlength：规定文本区域的最大字符数。
name：规定文本区的名称。
placeholder：规定描述文本区域预期值的简短提示。
readonly：规定文本区为只读。
required：规定文本区域是必填的。
rows：规定文本区内的可见行数。
wrap：规定当在表单中提交时，文本区域中的文本如何换行。值为hard：当在表单中提交时，textarea 中的文本换行（包含换行符）。 当使用 "hard" 时，必须规定 cols 属性。 ；值为soft（默认值）：当在表单中提交时，textarea 中的文本不换行

表单中的下拉列表

<datalist>

元素为

<input>

元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input>

元素的 list 属性必须引用

<datalist>

元素的 id 属性。

示例：

<form>
    <input list="city">
    <datalist id="city">
        <option value="杭州">
        <option value="宁波">
        <option value="温州">
        <option value="上海">
        <option value="深圳">
    </datalist>
</form>

单选按钮

定义方式：

<input type="radio" name="groupName" value="" />

type=“radio” ：控件类型是单选按钮

name：分组，根据name的值将多个单选按钮分为一组，在这一组中只能选中一个单选按钮；

value：单选按钮的值，在提交表单时，获取到的即是选中的这个单选按钮的值。

<form>
        <input type="radio" name="flower" value="A.就是这么红">A.就是这么红<br/>
        <input type="radio" name="flower" value="B.叶子是绿的">B.叶子是绿的<br/>
        <input type="radio" name="flower" value="C.我不知道">C.我不知道<br/>
        <input type="radio" name="flower" value="D.为什么这么红">D.为什么这么红<br/>
</form>

复选框

定义方式：

<input type="checkbox" name="flower" value="A.就是这么红">

<form>
1.花儿为什么这么红<br/>
        <input type="checkbox" name="flower" value="A.就是这么红">A.就是这么红<br/>
        <input type="checkbox" name="flower" value="B.叶子是绿的">B.叶子是绿的<br/>
        <input type="checkbox" name="flower" value="C.我不知道">C.我不知道<br/>
        <input type="checkbox" name="flower" value="D.为什么这么红">D.为什么这么红
</form>

按钮

表单中按钮有3种，一种是普通按钮，一种是提交按钮，另外一种是重置按钮。

提交按钮

用户在表单中填写信息后，点击提交按钮后，这些信息才会被发送到服务器。

定义方式：

<input type="submit" value="立即购买">

普通按钮

普通按钮可以用来做很多事情，也包括提交表单，重置表单，但做的事情需要自己写，之后再事件与普通按钮绑定，如果没有为普通按钮指定动作，或者没有达到触发条件，点击普通按钮不会发生任何事情。

定义方式：

<input type="button" onclick="masg()">

onclick：单击事件，当单击按钮时触发masg()方法。

重置按钮

清楚所属表单中输入的数据

定义方式：

<input type="reset" value="重置">

进阶使用表单

表单的提交

先来看一段代码：

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
   </p>
</form>

method：定义了表单提交的方式，有post和get两种，在实际网页开发中通常采用post方式提交表单数据

action：定义了表单提交的对象

post与get的区别

在浏览器后退时，get执行多少遍不影响最终存储的结果。而post每次调用都会创建新的资源；
get的传输有大小限制，但效率高，post可以传输大量数据，更适合文件上传；
Get的数据在URL中是可见的，post的数据RUL中不会显示；
post更适合传输中文字符
get的参数会保留在历史记录中，post不会

但是GET 和 POST，用的都是同一个传输层协议，所以在传输上，没有区别。

HTML学习笔记02------表格、表单、post与get表格表单

HTML学习笔记02-----表格、表单、post与get

表格

创建表格

进阶使用表格（表头、表主体、表尾的使用）

属性介绍

table属性

tr属性

td属性

表单

表单元素（基础）

标签元素

文本框

密码框

文本域

表单中的下拉列表

单选按钮

复选框

按钮

提交按钮

普通按钮

重置按钮

进阶使用表单

表单的提交

post与get的区别

继续阅读