html&css------表格、表单(11/1)
2017-11-01 13:29
519 查看
表格
基本的表格结构:
<table>:创建表格
<tr>:每行的开始,(table row)
<td>:表格中的每个单元格
表格的标题:
<th>:用法与<td>类似,表示列或行的标题(table heading),没有内容的话就是空单元格。
scope特性:元素是列标题还是行标题
<th scope="col">xxxx</th> #列标题
<th scope="row">xxxx</th>
#行标题
跨列:
在<th>或<td>元素中用colspan特性表明单元格索要跨越的列数。
<td colspan="2">xxxx</td>
#跨越了两个单元格
跨行:
在<th>或<td>元素中用rowspan特性表明单元格索要跨越的行数。
<td
rowspan="2">xxxx</td>
#跨越了两列单元格
长表格:
4000
<thead>:表格标题
<tbody>:表格主题部分
<tfoot>:表格脚注
宽度和间隔:
<table>标签的特性:
width:表格的宽度
cellpadding:表格中的每个单元格增加内边距
cellspacing:每个单元格之间设置间隔
<table
width="400" cellpadding="10" cellspacing="5">
边框和背景:
<table>、<td>标签的特性:
border:指定边框宽度
bgcolor:为整个表格或是单独的单元格指定背景颜色(十六进制代码)
表单
表单控件:
添加文本
单行文本框(text input):用于单行文本,电子邮件地址和姓名
密码框(password input):掩盖输入字符
文本域(text area):用于较长的文本,消息和评论
进行选择:
单选按钮(radio buttons):用户必须选择一个选项
复选框(checkboxes):可以选择一个或者多个选项
下拉列表(drop-down boxes):用户从一个选项列表中挑选期中之一
提交表单:
提交按钮(submit buttons):从你的表单向另一个网页提交数据
图像按钮(image buttons):类似于提交按钮,不过允许使用图片
上传文件:
允许把文件上传到网站
表单结构
<form>标签的特性:
action:每个<form>元素都需要一个action特性,特性值是服务器上一个页面的URL,这个页面用来在用户提交表单时接收表单的信息
method:表单提交的方式(get和post)
get(默认):短表单(搜索框)、中从web服务器上检索数据的情形
post: 允许用户上传文件、非常长、包含敏感信息(密码)、向数据库中添加信息,或是从数据库中删除信息
id:表单进行唯一标识
单行文本框
<input>创建多种不同的表单控件:
type:创建那种控件
单行文本框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="text" name="username" size="15" maxlength="30"/>
密码框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="password" name="password" size="15" maxlength="30"/>
单选按钮,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择rock,pop,jazz)
<input type="radio" name="genre" value="rock" checked="checked"/>rock
<input type="radio" name="genre" value="pop" />pop
<input
type="radio" name="genre" value="jazz" />jazz
复选框,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择itunes,lastfm,Spotify)
<input type="checkbox" name="service" value="itunes" checked="checked"/>itunes
<input
type="checkbox" name="service" value="lastfm" />Last.fm
<input
type="checkbox" name="service" value="spotify" />spotify
文件上传域
<input type="file" name="user-song"/>
提交按钮(将表单发送到服务器)
name不是必须的特性,value控制按钮上显示的文本
<input type="submit" name="subscribe" value="subscribe"/>
图片按钮
<input type="image" src="" art="" width="" height=""/>
隐藏控件
不会显示在页面上,运行网页设计人员向表单添加用户不能看到的值,方便网页设计人员在提交表单时位于那个页面
<input type="hidden" name="bookmark" value="lyrics"/>
按钮
更好的控制用户按钮的显示方式
<button><img src="" alt="" width="" height=""/>add</button>
日期控件
<input type="date" name="depart"/>
电子邮件和url输入
<input type="email" name="email"/>
<input
type="url" name="website"/>
搜索输入控件
<input type="search" name="search" placeholder="enter keyword"/> #placeholder(在文本框类显示的文本提示)
文本域(多行文本框)
<textarea name="comments" clos="20" rows="4">enter your comments....</textarea>
下拉列表框
<select name="devices">
#创建下拉列表框,包含两个或多个<option>
<option value="ipod">ipod</option>
<option value="radio">radio</option>
<option
value="computer">computer</option>
</select>
多选框
<select name="instruments" size="3" multiple="multiple">
#size(将下拉列表框变成一个能显示多个选项的列表框)、multiple(允许用户选择多项)
<option value="guitar" selected="selected">guitar</option>
<option value="drums">drums</option>
<option
value="keyboard" selected="selected">keyboard</option>
<option
value="bass">bass</option>
</select>
标签表单控件
(1)将文本说明和表单输入框全部包围起来
(2)与表单控件分开,使用for特性来指明<label>元素所关联的表单控件
for特性与控件的id特性进行匹配
组合表单元素
<fieldset>:可将相关的表单控件分成一组
<legend>:跟着<fieldset>标签后面并包含一个标题,帮助用户理解控件组的用途
基本的表格结构:
<table>:创建表格
<tr>:每行的开始,(table row)
<td>:表格中的每个单元格
表格的标题:
<th>:用法与<td>类似,表示列或行的标题(table heading),没有内容的话就是空单元格。
scope特性:元素是列标题还是行标题
<th scope="col">xxxx</th> #列标题
<th scope="row">xxxx</th>
#行标题
跨列:
在<th>或<td>元素中用colspan特性表明单元格索要跨越的列数。
<td colspan="2">xxxx</td>
#跨越了两个单元格
跨行:
在<th>或<td>元素中用rowspan特性表明单元格索要跨越的行数。
<td
rowspan="2">xxxx</td>
#跨越了两列单元格
长表格:
4000
<thead>:表格标题
<tbody>:表格主题部分
<tfoot>:表格脚注
宽度和间隔:
<table>标签的特性:
width:表格的宽度
cellpadding:表格中的每个单元格增加内边距
cellspacing:每个单元格之间设置间隔
<table
width="400" cellpadding="10" cellspacing="5">
边框和背景:
<table>、<td>标签的特性:
border:指定边框宽度
bgcolor:为整个表格或是单独的单元格指定背景颜色(十六进制代码)
表单
表单控件:
添加文本
单行文本框(text input):用于单行文本,电子邮件地址和姓名
密码框(password input):掩盖输入字符
文本域(text area):用于较长的文本,消息和评论
进行选择:
单选按钮(radio buttons):用户必须选择一个选项
复选框(checkboxes):可以选择一个或者多个选项
下拉列表(drop-down boxes):用户从一个选项列表中挑选期中之一
提交表单:
提交按钮(submit buttons):从你的表单向另一个网页提交数据
图像按钮(image buttons):类似于提交按钮,不过允许使用图片
上传文件:
允许把文件上传到网站
表单结构
<form>标签的特性:
action:每个<form>元素都需要一个action特性,特性值是服务器上一个页面的URL,这个页面用来在用户提交表单时接收表单的信息
method:表单提交的方式(get和post)
get(默认):短表单(搜索框)、中从web服务器上检索数据的情形
post: 允许用户上传文件、非常长、包含敏感信息(密码)、向数据库中添加信息,或是从数据库中删除信息
id:表单进行唯一标识
单行文本框
<input>创建多种不同的表单控件:
type:创建那种控件
单行文本框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="text" name="username" size="15" maxlength="30"/>
密码框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="password" name="password" size="15" maxlength="30"/>
单选按钮,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择rock,pop,jazz)
<input type="radio" name="genre" value="rock" checked="checked"/>rock
<input type="radio" name="genre" value="pop" />pop
<input
type="radio" name="genre" value="jazz" />jazz
复选框,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择itunes,lastfm,Spotify)
<input type="checkbox" name="service" value="itunes" checked="checked"/>itunes
<input
type="checkbox" name="service" value="lastfm" />Last.fm
<input
type="checkbox" name="service" value="spotify" />spotify
文件上传域
<input type="file" name="user-song"/>
提交按钮(将表单发送到服务器)
name不是必须的特性,value控制按钮上显示的文本
<input type="submit" name="subscribe" value="subscribe"/>
图片按钮
<input type="image" src="" art="" width="" height=""/>
隐藏控件
不会显示在页面上,运行网页设计人员向表单添加用户不能看到的值,方便网页设计人员在提交表单时位于那个页面
<input type="hidden" name="bookmark" value="lyrics"/>
按钮
更好的控制用户按钮的显示方式
<button><img src="" alt="" width="" height=""/>add</button>
日期控件
<input type="date" name="depart"/>
电子邮件和url输入
<input type="email" name="email"/>
<input
type="url" name="website"/>
搜索输入控件
<input type="search" name="search" placeholder="enter keyword"/> #placeholder(在文本框类显示的文本提示)
文本域(多行文本框)
<textarea name="comments" clos="20" rows="4">enter your comments....</textarea>
下拉列表框
<select name="devices">
#创建下拉列表框,包含两个或多个<option>
<option value="ipod">ipod</option>
<option value="radio">radio</option>
<option
value="computer">computer</option>
</select>
多选框
<select name="instruments" size="3" multiple="multiple">
#size(将下拉列表框变成一个能显示多个选项的列表框)、multiple(允许用户选择多项)
<option value="guitar" selected="selected">guitar</option>
<option value="drums">drums</option>
<option
value="keyboard" selected="selected">keyboard</option>
<option
value="bass">bass</option>
</select>
标签表单控件
<label>age:<input type="text" name="age"/></label> <br/> gender: <input id="female" type="radio" name="gender" value="f"> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m"> <label for="male">male</label>两种方式使用<label>标签:
(1)将文本说明和表单输入框全部包围起来
(2)与表单控件分开,使用for特性来指明<label>元素所关联的表单控件
for特性与控件的id特性进行匹配
组合表单元素
<fieldset>:可将相关的表单控件分成一组
<legend>:跟着<fieldset>标签后面并包含一个标题,帮助用户理解控件组的用途
相关文章推荐
- 【学习摘记】马士兵HTML & CSS_课时4-5_表格和表单
- HTML&CSS精选笔记_表格与表单
- html&css-----------颜色(11/2)
- html常用标签表单和表格等及css的简单入门
- HTML与CSS教学-第十章 对表格与表单应用CSS样式
- html&css-------文本(11/3)
- html+css学习笔记 5[表格、表单]
- <pre>标记、表格标记、html表单标记、插入Flash、框架技术
- html系统学习之三 <表格,列表,表单>
- html+css基础视频80-88/表格和表单的使用
- 前端学习 -- Html&Css -- 表单
- 表格 CSS(不换行) HTML <td> 标签的 nowrap 属性
- 精通CSS(7.1对数据表格应用样式&7.2简单的表单布局)&R语言课堂笔记(王中贤老师)
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- html&css--------其他标记(11/1)
- html&css-------图像(11/6)
- HTML&CSS基础篇之十六:表单
- HTML&CSS基础学习笔记1.26-input标签重置表单
- HTML&CSS基础学习笔记1.18-表格的边框
- 《HTML&CSS设计与构建网站》第六章 表格