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> ...
随机推荐
- 7.Constants and Fields
1.Constants is a symbol that has a never-changing value. its value must be determinable at compile ...
- 屏幕序列Screen Sequences
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]FTP到文件服务器，服务器上文件读写
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- MyEclipse启动Tomcat服务器时老是跳到Debug调试上
window->preferences->Myeclipse->Servers->Tomcat 然后找到你的相应的Tomcat服务器的版本, 选中然后展开其下面的子菜单会发现有 ...
- C#开发Activex控件(1)
项目结构 创建Activex步骤: 1.选择创建类别(Windows 控件库或类库) 2.设置对应的com属性 AssemblyInfo.cs中须做以下设置:a.引入命名空间:using System ...
- yii2-datepicker/datetimepicker插件使用
datepicker: https://github.com/2amigos/yii2-date-picker-widget 通过composer安装: composer require 2amigo ...
- iOS - OC Block 代码块
前言 Block 是一段预先准备好的代码,可以在需要的时候执行,可以当作参数传递.Block 可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值.Block 是 C 语言的,类似于一个 ...
- 抓包工具__Windows
我常使用的: 1. SoftPerfect Network Protocol Analyzer 2. fiddler . fiddler2 3.
- [转载] nginx的负载均衡
原文:http://www.srhang.me/blog/2014/08/27/nginx-loabbalance/ Nginx负载均衡 一.特点 1.1 应用情况 Nginx做为一个强大的Web服务 ...
- 关于远程连接MySQL数据库的问题解决
安装MySQL sudo apt-get install mysql-server 这个应该很简单了,而且我觉得大家在安装方面也没什么太大问题,所以也就不多说了,下面我们来讲讲配置. 配置MySQL ...