表格、input控件、label标签、textarea控件、下拉菜单、表单域

表格

表格基本语法

table用于定义一个表格

tr用于定义表格中的一行

td用于定义表格中的单元格

注意

<td></td>标签，他就像一个容器，可以容纳所有的元素

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

表格属性

border - 像素值

cellspacing - 单元格与单元格之间的空白边距

cellpadding - 设置单元格内容与单元格边框之间的空白边距

width - 设置表格的宽度

height - 设置表格的高度

align - 设置表格在网页中的水平对齐方式

left 、 center、 right

表头标签

<th>

只需要将<td>改为<th>即可

表头单元格一般位于表格的第一行或者第一列

文本内容居中加粗

表格标题

<caption>

caption - 必须紧跟表格标签之后

<table>
    <caption>表格标题</caption>
  <tr>
    <th>表头文字</th>
    <th>表头文字</th>
  </tr>
  <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
  </tr>
</table>

合并单元格

合并的顺序

先上 后下 先左 后右

rowspan

跨行合并

colspan

跨列合并

 

input表单

表单组成

表单控件

有单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息

说明文字，提示用户操作

表单域

他相当于一个容器

提交所有表单数据到后台

input控件

属性

type

属性值

text - 单行文本输入框

password - 密码输入框

radio - 单选按钮

checkbox - 复选框

button - 普通按钮

submit - 提交按钮

reset - 重置按钮

image - 图像形式的提交按钮

file - 文件域

name

由用户自定义 - 提交给服务端时的key

value

由用户自定义 - input控件的默认值

checked

属性值

checked - 定义选择控件默认被选中的项

maxlength

控件允许输入的最多字符数

 

label标签

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

​

<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>

 

textarea控件(文本域)

如果需要输入大量的信息，就需要用到textarea

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

 

 

下拉菜单

<select&gt;</select>中至少应包含一对<option></option>。

在option 中定义selected =" selected "时，当前项即为默认选中项。

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

 

表单域

即创建一个表单，以实现用户信息的收集和传递

form中的所有内容都会被提交给服务器

属性

Action

指定节后表单数据服务端的url地址

method

设置表单数据的提交方式

get或者post

name

指定表单的名称，区分一个页面中的多个表单

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>