HTML：表格与表单
一、图片热点：规划出图片上的一个区域，可以做出超链接，直接点击图片区域就可以完成跳转的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<img src="33.jpg" usemap="ditu" title="这是兔子" />
<map name="ditu">
<area shape="rect" coords="702,377,802,477" href="http://www.baidu.com" />
<area shape="circle" coords="930,486,117" href="http://www.sougo.com" />
<area shape="rect" coords="1049,552,1238,669" href="http://www.sougo.com" />
</map>
<img src="../Sample Pictures/tyu.jpg" usemap="xiong" title="这是倒霉熊" />
<map name="xiong">
<area shape="rect" coords="126,193,326,393" href="http://www.baidu.com" />
<area shape="rect" coords="718,198,938,418" href="http://www.sohu.com" />
<area shape="circle" coords="592,148,70" href="http://www.sogou.com" />
<area shape="circle" coords="435,149,70" href="http://www.qq.com" />
</map>
</body>
</html>
二、网页内嵌：在一个网页里，规划出一个区域用来展示另一个网页的内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<iframe src="Untitled-1.html" width="400" height="300" frameborder="1"></iframe>
<iframe src="Untitled-邮箱页面.html" width="500" height="400"></iframe>
<iframe src="../8月8日 HTML基础/Untitled-个人简历.html" width="300" height="600"></iframe>
</body>
</html>
三、表单：
<form id="" name="" method="post/get" action="负责处理的服务端">
id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，
post提交没有长度限制，且编码后内容不可见。
</form>
1.文本输入
文本框<input type="txt" name="" id="" value="" />
密码框<input type="password" name="" id="" value="" />
文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>
隐藏域<input type="hidden" name="" id="" value="" />
2.按钮
提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址
重置按钮<input type="reset" name="" id="" disabled="disabled" value="" />
普通按钮<input type="button" name="" id="" disabled="disabled" value="" />
图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址" />
disabled使按钮失效
enable使按钮可用
3.选择输入
单选按钮组<input type="radio" name="" checked="checked" value="" />
name的值用来分组，value的值看不见，提交给程序用的，checked设置默认选项。
复选框组<input type="checkbox" name="" checked="checked" value="" />
文件上传<input type="file" name="" id="" />
<lable for=""></lable>
lable标签为input元素定义标注。
lable元素不会向用户呈现任何特殊效果，不过，他为鼠标用户改进了可用性。如果您在lable元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器会 将焦点转到和标签相关的表单控件上。
lable标签的for属性应当与相关元素的id属性相同。
4.下拉列表框
<select name="" id="" size="" multiple="multiple">
--size为1时，为菜单；>1时，为列表。multiple为多选。
<option value="值">内容1</option>
<option value="值" selected="selected">内容2</option>
--selected,设为默认
<option value="值">内容3</option>
</select>
5.标签
<label></label>
字段集 （一堆label）
<fieldset></fieldset>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<form>
账号：<input type="text" value="文本框" required="required" />value里面的值得默认值，会直接显示出来;required意思是必须填写<br />
<br />
密码：<input type="password" placeholder="请输入密码" required="required" />placeholder="请输入密码",placeholder引号里面的文字提示会直接显示出来，填写密码是消失，删除密码时重新显示提示内容<br />
<br />
邮箱:<input type="email" required="required" /><br />
<br />
按钮：<input type="button" value="登录" />普通按钮<br />
<br />
<input type="submit" value="提交" />提交、注册按钮<br />
<br />
<input type="reset" disabled="disabled" />重置按钮，有重置按钮是必须有form，需要找到要充值的内容；disabled设置后文本框将不能改写<br />
<br />
<input type="image" src="../Sample Pictures/tyu.jpg" width="200" /><br />
<br />
说说：<textarea name="" cols="35" rows="5">文本域</textarea><br />
<br />
隐藏域<input type="hidden" value="12344" />
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" checked="checked" />女
这是单选按钮组。单选按钮组必须命名，这样在一组中只能选一个<br />
<br />
<input type="checkbox" checked="checked" />可口可乐<br />
<input type="checkbox" checked="checked" />百事可乐<br />
<input type="checkbox" checked="checked" />雪碧<br />
这是复选框组，复选框组不命名也可以，因为本身就可以复选
<br />
<input type="file" /> 选择文件<br />
<br />
<select size="1">
<option value="1">可口可乐</option>
<option value="2">百事可乐</option>
<option value="3">雪碧</option>
</select>当size是1的时显示实的是下拉框<br />
<br />
<select size="3">
<option value="1">可口可乐</option>
<option value="2">百事可乐</option>
<option value="3">雪碧</option>
</select>当size大于1的时候显示的是菜单
</form>
</body>
</html>
HTML：表格与表单的更多相关文章
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- 第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 13、Semantic-UI之表格与表单
13.1 定义基础样式表格 在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...
- 框架，表格，表单元素，css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- Html学习之十八（表格与表单学习--统计表制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- hashcat
作者: 官网:https://hashcat.net/oclhashcat/ 功能:hash破解
- nancy的诊断2
接上文. 一 再看看第二个面板内容 点击带文号 的 Interactive Diagnostics 这个面板 如下 上面的是诊断程序,默认是系统提供的测试用的诊断程序. 你可以 通过实现IDiag ...
- MySQl的几个配置项
对对于MySQL的日志功能,我们可以完全自己控制到底写还是不写.一般来说,binlog我们一般会开启,而对于慢查询我们一般会在开发的时候调试和观 察SQL语句的执行速度.但今天发现一个问题.在使用sh ...
- FLASH CC 2015 CANVAS 实际应用过程中遇到的【粉色】问题（不定期更新）
1,导入音乐导致发布卡死 一开始以为是不支持,FQ搜索了一些帖子,也有说不能再时间轴加音乐,需要用代码加入,想想不太可能啊,如果真的不能为什么IDE不禁用呢? 而实际问题是: 我使用的其中一条音效有问 ...
- mysql 前缀索引
计算适合设置索引的长度,直到去重以后在一个固定值. 根据去重以后适合的长度设置索引. 计划查询
- pdmreader支持读取xml格式的pdm文件，无法读取二进制格式的pdm文件。
您的Pdm数据字典文件可能不被PDMReader读取,可能是因为pdm文件版本的问题.但 您可以通过PowerDesigner12(下载PowerDesigner12)进行转换 后进行读取. 您要做的 ...
- 【HTML5 】<script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- DRUID连接池的实用 配置详解
DRUID介绍 DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针 ...
- JAVA的extends用法
理解继承是理解面向对象程序设计的关键.在Java中,通过关键字extends继承一个已有的类,被继承的类称为父类(超类,基类),新的类称为子类(派生类).在Java中不允许多继承.(1)继承 clas ...
- EL表达式 （详解）(转）
EL表达式 1.EL简介 1)语法结构 ${expression} 2)[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一 ...