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> ...
随机推荐
- JSP学习——语法
JSP模版元素 JSP表达式 JSP脚本片断 JSP注释JSP指令JSP标签 JSP内置对象如何查找JSP页面中的错误 1:JSP模版元素 : JSP页面中的HTML内容称之为JSP模版元素. JSP ...
- 表单美化-原生javascript和jQuery下拉列表（兼容IE6）
效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...
- iOS - NSURLSession 网络请求
前言 NS_CLASS_AVAILABLE(NSURLSESSION_AVAILABLE, 7_0) @interface NSURLSession : NSObject @available(iOS ...
- iOS - PassData
前言 页面传值: 复合传值 单例传值 userDefaults 传值 代理传值 Block/闭包传值 1.复合传值 复合 - 正向传值 1.接收方,头文件中创建可存放传递值的属性变量 2.发送方,包含 ...
- Java实现分页数据获取CachedRowSet
步骤 1.加载驱动 2.连接数据库 3.创建ResultSet 4.创建CacheRowSet 5.设置并获取分页数据 6.执行查询,展示数据 package ch13; import javax.s ...
- MediaPlayer的生命周期
- UEditor文档
UEditor文档http://fex.baidu.com/ueditor/Ueditor 前后端数据交互 http://blog.csdn.net/bobo_93/article/details/5 ...
- OpenGL的几何变换2之内观察立方体
我想实现的一个场景是:一个立方体,相机的坐标在立方体的中心点,相机不变,立方体旋转,可以站在立方体中心点查看立方体内部. 实际上就是立方体图像,这是在全景图片当作比较简单的方式,画面不会变形和扭曲,但 ...
- 通过NORFLASH中的uboot烧写uboot到nandFlash
在mini2440的教程中,在构建nandflash系统的时候是首先通过supervivi借助dnw烧写uboot.bin到nand flash 第零块, 由于我使用的是64位操作系统,usb驱动没安 ...
- html文本框(input)不保存缓存记录
有的时候js往文本框里赋值,结果在火狐中刷新后,刚才赋的值还在,导致好多麻烦的事情,现总结一下解决办法如下: <input name="bestlovesky" type= ...