name: 给这个表单起个名字
method: 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).
action: 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
target :目标窗口的打开方式
enctype:表单信息提交的编码形式，其属性值有 text/plain、 applicarion/x-www-form.urlencoded 和multipart/ form-data 三个

input元素

input是一个单一型元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

<input type="text ">

type：input的工作方式相当程度上取决于type属性的值，不同的 type 值会赋予input元素不同的功能。如果未指定此属性，则采用的默认类型为 text。

表单输入类型：

text (默认)：单行的文本输入框，输入中的换行会被自动去除。

<input type="text">

password：单行的密码输入框，输入的文本使用密文显示。

<input type="password">

number：只能输入数字的输入框。

<input type="number">

email：编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。

<input type="email">

search：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。

<input type="search">

tel：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。

<input type="tel">

表单日期类型：

week：用于输入以年和周数组成的日期，不带时区。
month ：输入年和月的控件，不带时区。
time (H5新增)：于输入时间的控件，不包括时区。
date (H5新增)：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。
datetime-local：输入日期和时间的控件，使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 (目前支持的浏览器为数不多)

表单单复选类型：

checkbox：复选框，可设为选中或未选中。

radio：单选框

单选栏位 :<input type=”radio” name=” 栏位名称 ” value=” 内定值 ” checked=”checked” disabled=” disabled ”>

表单按钮类型：

button：没有默认行为的按钮，上面显示 value 属性的值，默认为空。
submit：用于提交表单的按钮。
reset：此按钮将表单的所有内容重置为默认值。不推荐。

表单文件类型

file：让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

表单颜色类型

color：用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。

表单范围控制类型

hidden：不显示的控件，其值仍会提交到服务器。

input 元素的属性

type：所有input元素,input表单控件的type
disabled：所有input元素,表单控件是否被禁用
form：所有input元素,将控件和一个form元素联系在一起
name：所有input元素,input表单控件的名字。以名字/值对的形式随表单一起提交
value：所有input元素,表单控件的值。以名字/值对的形式随表单一起提交
checked：当input元素type为radio, checkbox时，用于控制控件是否被选中
alt：当input元素type为image时，alt属性是可访问性的要求。
height： image 和 <img> 的 height 属性相同；垂直方向
src： image 图像资源的地址
width： image 与 <img> 的 width 属性一样
placeholder：当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容

label元素

将一个 <label> 和一个 <input> 元素相关联的优点：

你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素自身一样。这扩大了元素的可点击区域，让包括使

用触屏设备在内的用户更容易激活这个元素。

你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="apple">Do you like apple?</label>
<input type="text" name="apple" id="apple">

支持的属性：

for：即和 <label> 元素在同一文档中的可关联标表单元素的 id。

注意： <label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素。

form：表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

多行文本输入框/文本域

概念：HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<label for="proposal">请提出宝贵的建议</label>
<textarea id="proposal" name="proposal"
rows="5" cols="33">
这里是多行文本输入框的内容......
</textarea>

为了提高可访问性（accessibility），请 <label> 与 <textarea> 关联。

name 属性，用于设置随表单一同提交到服务器的相关数据的名字。

rows 和 cols 属性，用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。

位于开始标签和闭合标签之间的内容就是 <textarea> 输入框中的内容。 <textarea> 不支持 value 属性。

支持的属性：

name：元素的名称。
disabled：禁用文本域。默认为false。
form：指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许
你在文档的任意地方放置文本域元素。
placeholder：向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作
为行断（换行）处理。
readonly：不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单
里，这个元素的值还是会跟随表单一起提交。
required：提示用户这个元素的内容必填。
cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。
rows：元素的输入文本的行数（显示的高度）。

窗体选项栏

概念：HTML <select> 元素表示一个提供选项菜单的控件

格式：

<label for="关联id">Choose:</label>
<select name=”栏位名称” size=”数字” id="关联id">
<option value=”选项值” selected=”selected”>
<option value=”选项值”>…
<option value=”选项值”>…
</select>
<!--
你还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。
-->
<select>
<optgroup label="分组名称">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="分组名称">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>

select支持的属性：

disabled：这个布尔值的属性表示用户不能与该表单控件交互。
元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。
form： <select> 所关联的 <form> (它的"表单拥有者")。其值必须是在同一文档中的
name：该属性规定了控件的名称。

option支持的属性：

disabled：如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事
件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的
label：这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。
selected：这个布尔属性存在时表明这个选项是否一开始就被选中。 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。
value: 这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

简单表格的制作

表格标签是 <table>..</table>，表格的其他标签只有在表格的开始标签 <table>和格的结束标签 </table> 间才有效。用于制作表格的主要标签如下表所示。

标签	含义
<table>	表格标签
<ti>	行标签
<td>	单元格标签

<table>标签的语法格式如下:

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

在该语法中，<table> 和 </table> 标签分别标志着一个表格的开始和结束 <tr> 和</tr>标签分别标志着表格中一行的开始和结束，在表格中包含几组 <tr>...</tr> 标签，就表示该表格为几行: <td> 和 </td> 标签标志着一个单元格的开始和结束，即表示一行中包含了几列。

表头的设置

表格中还有一种特殊的单元格，称为表头。表头一般位于表格第一行，用来表明该列的内容类别，用 <th> 和 </th> 标签来表示。<th> 标签的使用方法与 <td> 签的使用方法相同，但是 <th> 标签中的内容是加粗显示的，其语法格式如下:

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

表格的合并

表格的合并是指在复杂的表格结构中,有些单元格是跨多列的,有些单元格是跨多行的,其语法格式如下:

//左右合并
<td colspan="跨的列数">
//上下合并
<td rowspan="跨的行数">

在该语法中，跨的列数是指单元格在水平方向上跨的列数: 跨的行数是指单元格在垂直方向上跨的行数。

举个栗子

<td rowspan="2">序号</td>
      <td colspan="2">姓名</td>

编辑

div 标签

<div> 标签是用来为 HTML 文档内容提供结构和背景的元素。<div> 起始标签和/div> 结束标签之间的所有内容都是用来构成这个块的，其中包含的标签的特性由 <div>示签中的属性来控制，或者通过使用样式表格式化这个块来进行控制。

div 标签的介绍

div 全称为 division，意为分隔。<div> 标签被称为分隔标签，表示一块可以显示HTML 的区域，用于设置字、图片、表格等的摆放位置。<div> 标签是块级标签，需要使用结束标签 </div>。

块级标签叉名块级元素，与其对应的是内联元素，也叫行内标签，它们都是HTML 规范中的概念

<div> 标签的语法格式如下:

<div>
...
</div>

div 标签的应用

在应用 <div> 标签之前，先来了解 <div> 标签的属性。当网页加入层时，会经常用到<div> 标签的属性。

<div> 标签的语法格式如下:

<div id="value" align="value" class="value" style="value">
</div>

其中各参数含义如下。

(1) id: <div> 标签的 id，也可以说是 <div>标签的名字，常与 CSS 式相结合，实现对网页中元素的控制。

(2) align: 用于控制 <div> 标签中元素的对齐方式，其值可以是 left、center 和right，分别用于设置元素的居左、居中和居右对齐。

(3) class: 用于设置 <div> 标签中元素的样式，其值为 CSS 样式中的 class 选择符。

(4) style: 用于设置 <div> 标签中元素的样式，其值为 CSS 属性值，各属性值应用分号分隔。

span 标签

大部分 HTML 标签都有其意义(如<p> 标签创建段落、<h1> 签创建标题等)，然而<span> 标签和 <div> 标签似乎没有任何内容上的意义，但它与 CSS 结合后，应用范围就非常广泛了。

span 标签的介绍

<span> 标签和 <div> 标签非常类似，是 HTML中组合用的标签，可以作为插入 CSS的容器，或插入 class、id 等语法内容的容器。

<span> 标签的语法格式如下:

<span>
...
</span>

span 标签的应用

<span> 标签是行内标签，<span> 标签的前后不会换行，它没有结构上的意义，是纯粹的应用样式，当其他行内元素都不合适时，可以使用 <span> 标签。

列表

列表形式在网站设计中占据比较大的比重，可以使网页上的信息整齐、直观地显示出来，便于用户理解。在后面的学习中会涉及大量列表元素的高级运用。

列表的标签

列表分为两种类型:一种是有序列表，另一种是无序列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来标记无序的项目。

列表的主要标签如表所示：

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<dl>	定义列表
<menu>	菜单列表
<dt>,<dd>	定义列表的标签
<li>	列表项目的标签

type类型的符号类型

类型值	列表项目的符号
disc	实心⚪
circle	空心⚪
square	实心■

有序列表的序号类型

type取值	列表项目的序号类型
1	数字1，2，3，4，..·
a	小写英文字母 a，b，c，d，·.·
A	大写英文字母 A，B，C，D，·.·
i	小写罗马数字i，ii，ii，iv，..·
I	大写罗马数字I，，m，IV，...

HTML+CSS+JS 学习笔记（一）———HTML(下)

表单

表单的功能结构

form元素