web前端学习2(表单）

表单

HTML 表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

1.form标签及其属性

表单使用表单标签和来设置的。
基本语法：

<form name="表单名称" method="提交方法" action="处理程序">···</form>

<form>标签还有name、method、action、target等属性。

其中：name 代表表单的名称。method 规定用于发送数据所使用的HTML方法（get、post）。action 为处理方法，一般填入URL。target 规定在何处打开URL（_blank、 _self、_parent、 _top、framename）。

2.input标签及其属性

格式：

<input type="域类型" name="名称" value=""/>

<input>元素是最重要的表单元素。
<input>元素有很多形态，根据不同的 type 属性可以做出以下分类：

①文本域：text

格式：

<input type="text" name="名称" maxlength="" size="" value=""/>

maxlength属性用来定义此区域输入的最大字符数。例如当maxlength设置为5的时候，文本域内最多只能输入五个数。

<form action="" method="post">
   文本域：<input type="text" name="名称" maxlength="5"/>
</form>

size属性用来定于此区域显示的尺寸的大小。例如如下size分别为5和20的对比。
size的默认宽度是 20 个字符。

文本域：<input type="text" name="名称" size="5"/>
文本域：<input type="text" name="名称" size="20"/>

value属性为输入框的值，可以不填，因为当用户在输入框输入值时，value会自动赋值为输入框的值。如果填写，则直接显示在输入框内。

文本域：<input type="text" name="名称" value="我是一个文本域"/>

②密码域：password

格式：

<input type="password" name="名称" maxlength="" size="" value=""/>

当用户在密码域输入框内输入密码时。输入框区域会显示 “ * ”号代替用户输入的内容。

③单选按钮：radio

格式：

<input type="radio" name="名称" value="" checked/>

其中checked属性是用来设置该单选按钮默认状态是选中状态。

当有多个互斥的单选按钮时，需要设置相同的name值。这样，每个时刻都只会有一个选项被选中。

单选按钮1：<input type="radio" name="单选" value=""/><br/><br/>
单选按钮2：<input type="radio" name="单选" value="" checked/><br/><br/>

④复选按钮：checkbox

格式：

<input type="checkbox" name="名称" value="" checked/>

因为复选按钮不需要互斥，所以name可以一样，也可以不一样。

复选按钮：<input type="checkbox" name="复选1" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value="" checked/><br/>
复选按钮：<input type="checkbox" name="复选2" value=""/><br/>

⑤提交按钮：submit

格式：

<input type="submit" name="" value="提交">

能将表单提交给服务器的按钮，实现交互功能。

⑥重置按钮：reset

格式：

<input type="reset" name="" value="清空"><br/><br/>

能将填写了信息的表单全部清空的按钮。

⑦文件域：file

格式：

<input type="file" name="" size="" maxlength="">

提供上传文件的功能

⑧隐藏域：hidden

格式：

<input type="hidden" name="" value="">

用户不能在其中输入信息，用来预设某些要传递的信息。

2.下拉列表框:select 、option

在表单中，可以通过<select>和<option>标签设计一个下拉式列表或带有滚动条的列表，用户可以再列表中选着一个或多个选项。

基本语法：

<select name="" size="" multiple>
    <option value="" selected="">选项一</option>
    <option value="">选项二</option>
    ```
</select>

语法说明：

①<select>标签下：

name：下拉列表的名称。
size：下拉列表框的大小，默认为1。
multiple：允许用户多选，如果缺省，则表示单选。
②<option>标签下：

value：用于选项被选中后提交给服务器的数据。
selected:设置默认状态为选中状态。

列如：

<p>课程选择：
<select name="" size="">
  <option value="" selected="">java web</option>
  <option value="">数据预处理</option>
  <option value="">数据挖掘</option>
  <option value="">信息安全技术</option>
  <option value="">马克思主义</option>
</select>
</p>

3.多行文本框:textarea

基本语法：

<textarea name="" rows="" cols="" wrap="">
  初始值
</textarea>

其中：rows为输入域的行数，cols为输入域的列数，warp用于是否自动换行（hard、soft）。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td>标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如：

<table border="1" cellspacing="0"
<caption>表格标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<th><th>定义表头
<caption>定义标题
cellspacing:单元格与的单元格之间的间距

表格标题

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

单元格合并

（1）水平方向上的单元格合并

可以给td标签添加一个colspan属性，把某一个单元格当做多个单元格来看待（水平方向）
例如：

<td colspan="2"></td>

含义：把当前单元格当做两个单元格来看待

（2）垂直方向上的单元格合并

可以给td标签添加一个rowspan属性，把某一个单元格当做多个单元格来看待（垂直方向）

<td rowspan="2"></td>