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> ...
随机推荐
- [SAP ABAP开发技术总结]逻辑数据库
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- pfx,cer转pem，并对通过pem文件进行签名与验签
因为PHP无法读取.pfx文件,所以可以先转换为.pem文件然后在读取里面的数据,可以读取.cer文件,为了两方面统一,就都换成.pem然后再进行加签和验签. sign.php <?php de ...
- Scrum Meeting---Five(2015-10-29)
今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 Java Web工程创建,hibernate框架安装,关系映射文件生成 4h 用户注册登录 4h 胡 ...
- 播放列表文件用于HTTP实时流的使用
广告播放清单(Discontinuities): 通常你会想要提供一系列的电影,在每个电影前面显示一些品牌(广告),让用户知道这些电影来自你的特定网站.一种方法是简单地将广告与每部电影合并.但是如果你 ...
- Myeclipse优化篇
1 . window-preferences-MyEclipse Enterprise Workbench-Maven4MyEclipse-Maven ,将 Maven JDK 改为电脑上安装的 JD ...
- c/c++小知识
1.printf计算参数时是从右到左 2.(int&)a 表示把a在内存中的值强行当作int数来处理 3.float四字节,1位符号位(正数为0),8位指数位(0采取01111111),23位 ...
- control file sequential read 等待事件
可能的原因 control file sequential read Reading from the control file. This happens in many cases. For ex ...
- 简单ssh框架整合
Struts2+Spring4 +Hibernate4 首先看看建立项目的框架 第一步 建立web项目 第二步 导入相对应需要的jar包(放在项目WEB-INFO/lib下) 需要导入Spring ...
- JS 的子父级页面调用
window.frames["iframevehquery"].add(); // 父页面调用嵌套子页面的js函数, iframevehquery 为 iframe 的name值, ...
- 转！！java中Object转String
Object转为String的几种形式 在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString ...