Html--表单练习
| <!--文档定义一定要带上，因为浏览器在解析的时候先按照文档定义的格式解析， | |
| 如果没有就按照浏览器默认的格式解析，可能会出问题。--> | |
| <html> | |
| <head> <!--标签头--> | |
| <title>b标签练习1</title> <!--标题--> | |
| </head> | |
| <body> <!--标签体--> | |
| <!--Test1--> | |
| <ol><!--有序标签--> | |
| <li>爱</li> | |
| <li>青苹果乐园</li> | |
| <li>蝴蝶效应</li> | |
| <li>芙蓉姐夫</li> | |
| <li>水煮鱼</li> | |
| </ol> | |
| <!--Test2--> | |
| <ul><!--无序标签--> | |
| <li>爱</li> | |
| <li>青苹果乐园</li> | |
| <li>蝴蝶效应</li> | |
| <li>芙蓉姐夫</li> | |
| <li>水煮鱼</li> | |
| </ul> | |
| <!--Test3--> | |
| <ul type="A"><!--类型：square 1 a --> | |
| <li>爱</li> | |
| <li>青苹果乐园</li> | |
| <li>蝴蝶效应</li> | |
| <li>芙蓉姐夫</li> | |
| <li>水煮鱼</li> | |
| </ul> | |
| <!--Test4表格--> | |
| <table border="1" height="200" width="450"><!--table表格标签--> <!--border最外层边框宽度--><!--height：高度 width:宽度--> | |
| <tr align=center ><!--tr行标签,align对齐方式，center居中--> | |
| <td><strong>姓名</strong></td> <!--td列标签--> | |
| <td><strong>性别</strong></td> | |
| <td><strong>工资</strong></td> | |
| </tr> | |
| <tr> | |
| <td>张三</td> | |
| <td>男</td> | |
| <td>10000</td> | |
| </tr> | |
| <tr> | |
| <td>李四</td> | |
| <td>男</td> | |
| <td>10000</td> | |
| </tr> | |
| <tr> | |
| <td>王五</td> | |
| <td>男</td> | |
| <td>10002</td> | |
| </tr> | |
| <tr> | |
| <td>舒翠</td> | |
| <td>女</td> | |
| <td>15000</td> | |
| </tr> | |
| </table> | |
| <!--cellpadding(填充)：用来统一设置表格中每个单元格的填充大小； | |
| cellspacing(间距)：用来统一设置表格中每个单元格与单元格之间的间距--> | |
| <!--Test4-2表格--> | |
| <table border="1" cellpadding="30"> | |
| <tr ><!--行标签--> | |
| <td>姓名</td> | |
| <td>性别</td> | |
| <td>工资</td> | |
| </tr> | |
| <table /> | |
| <!--Test4-3表格--> | |
| <table border="1" cellspacing="30"> | |
| <tr ><!--行标签--> | |
| <td>姓名</td> | |
| <td>性别</td> | |
| <td>工资</td> | |
| </tr> | |
| <table /> | |
| <!--Text4-4表头表尾--> | |
| <table border="1" > | |
| <thead><!--thead表头自动加粗、居中--注意改为；th--> | |
| <tr> | |
| <th>姓名</th> | |
| <th>性别</th> | |
| <th>工资</th> | |
| </tr> | |
| </thead> | |
| <tr> | |
| <td>张三</td> | |
| <td>男</td> | |
| <td>10000</td> | |
| </tr> | |
| <tr> | |
| <td>李四</td> | |
| <td>男</td> | |
| <td>10000</td> | |
| </tr> | |
| <tr> | |
| <td>王五</td> | |
| <td>男</td> | |
| <td>10002</td> | |
| </tr> | |
| <tfoot><!--thead表头自动加粗、居中--注意改为；th--> | |
| <tr> | |
| <th>舒翠</th> | |
| <th>女</th> | |
| <th>15000</th> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| <!-- 水平对齐方式：align :left\center\right | |
| 垂直对齐方式：valign:top\middle\bottom--> | |
| <!--Test5表格--> | |
| <table border="1" height="175" width="400"> | |
| <caption>这是一个表格</caption><!--说明--> | |
| <tr> | |
| <td align=center colspan="3"><b>学生基本情况</b></td><!--rowspan合并行 colspan合并列--> | |
| </tr> | |
| <tr align=center> | |
| <td><strong>姓名</strong></td> | |
| <td><strong>性别</strong></td> | |
| <td><strong>专业</strong></td> | |
| </tr> | |
| <tr> | |
| <td>刘备</td> | |
| <td>男</td> | |
| <td rowspan="3">计算机</td> | |
| </tr> | |
| <tr> | |
| <td>张飞</td> | |
| <td>男</td> | |
| </tr> | |
| <tr> | |
| <td>诸葛亮</td> | |
| <td></td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!--知识点1--> | |
| <!--<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、 | |
| <textarea>、<select>等表单元素放到form中 | |
| <input>是主要的表单元素，type的可选值：submit(提交按钮)、button（普通按钮） | |
| checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮） | |
| password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框） | |
| <input type="file"/>--> | |
| <!--知识点2--> | |
| <!--id属性的目的主要是为了客户端，可以通过javascript语言来操作某个元素。 | |
| 所有元素都可以有id，并且每个元素的id不可以重复。 | |
| --name属性的目的是为了将数据提交到服务器。 | |
| 只有表单元素才可以有name，并且name是可以重复的。 | |
| 表单提交其实就是提交的表单元素的value中的内容，用户输入的值自动就到value中了--> | |
| <html> | |
| <head> | |
| <title>表单</title> | |
| </head> | |
| <body> | |
| <form action="http://www.baidu.com/a.aspx" method="get"><!--action(提交)处理,get post一种提交方法--> | |
| <table border="1"><!--border边框粗细--> | |
| <tr> | |
| <td>姓名：</td> | |
| <td><input name="txtName" type="text" value="王小明"/></td> <!--name可以做自由命名，type有一定类型，有点像窗体控件--> | |
| </tr> | |
| <tr> | |
| <td>邮箱：</td> | |
| <td><input name="txtEmail" type="text" value="sfjslf@qq.com"/></td> | |
| </tr> | |
| <tr> | |
| <td>密码：</td> | |
| <td><input name="txtPassword" type="password"/></td> | |
| </tr> | |
| <tr> | |
| <td>确认密码：</td> | |
| <td><input name="txtConfirmPassword" type="password"/></td> | |
| </tr> | |
| <tr> | |
| <td>性别：</td> | |
| <td><input type="radio" name="gender" value="male">男 | |
| <input type="radio" name="gender" value="female" />女</td> | |
| </tr> | |
| <tr> | |
| <td>兴趣爱好：</td> | |
| <td> | |
| <input name="hobby" type="checkbox" value="1"/> 篮球 | |
| <input name="hobby" type="checkbox" value="2"/>跑步 | |
| <input name="hobby" type="checkbox" value="3"/>看书看报 | |
| <input name="hobby" type="checkbox" value="4"/>吃东西 | |
| <input name="hobby" type="checkbox" value="5"/>旅游 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>所在地区：</td> | |
| <td> | |
| 省： | |
| <select name="province" multiple="multiple" size="4"> <!--创建带有 4 个选项的选择列表--> | |
| <option value="1">黑龙江</option> | |
| <option value="2">吉林</option> | |
| <option value="3">武汉</option> | |
| <option value="11">襄阳</option> | |
| <option value="1">黑龙江</option> | |
| <option value="2">吉林</option> | |
| <option value="3">武汉</option> | |
| <option value="11">襄阳</option> | |
| </select> | |
| 市： | |
| <select> | |
| <optgroup label="襄阳"> | |
| <option value="101">宜城</option> | |
| <option value="102">枣阳</option> | |
| <option value="103">老河口</option> | |
| <option value="104">谷城</option> | |
| <option value="105">南漳</option> | |
| <optgroup label="武汉"> | |
| <option value="121"武昌区</option> | |
| <option value="122">汉阳区</option> | |
| <option value="123">汉口</option> | |
| <option value="124">江夏区(05）</option> | |
| <option value="125">洪山区(06)</option> | |
| </optgroup> | |
| </select> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" style="heght:80px;"> | |
| <fieldset style="height:50px;"><!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。--> | |
| <legend>请选择你感兴趣的内容：</legend> <!--组合表单中的相关元素--> | |
| <input name="hobby" type="checkbox" value="1"/> 数据库 | |
| <input name="hobby" type="checkbox" value="2"/>网络 | |
| <input name="hobby" type="checkbox" value="3"/>web开发 | |
| <input name="hobby" type="checkbox" value="4"/>移动开发 | |
| </fieldset> | |
| </td> | |
| </table> | |
| </form> | |
| </body> | |
| </html> |
详细知识点：www.w3cschool 、菜鸟教程
Html--表单练习的更多相关文章
- ASP.NET Aries 入门开发教程9：业务表单的开发
前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...
- 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路（5）- 简单的表单应用
▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
- .net erp（办公oa）开发平台架构概要说明之表单设计器
背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图 表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- from表单提交数据之后，后台对象接受不到值
如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
随机推荐
- C算法编程题（四）上三角
前言 上一篇<C算法编程题(三)画表格> 上几篇说的都是根据要求输出一些字符.图案等,今天就再说一个“上三角”,有点类似于第二篇说的正螺旋,输出的字符少了,但是逻辑稍微复杂了点. 程序描述 ...
- Full Gc经历分析
背景: 个别机器:内存突然上升,cpu利用率升高. 解决过程 1. jmap dump整个内存镜像 2. 整个文件700多M,使用Jhat打不开 3. 换heapanalyzer,能打开,但没有分析出 ...
- 史上最详细的iOS之事件的传递和响应机制
前言: 按照时间顺序,事件的生命周期是这样的: 事件的产生和传递(事件如何从父控件传递到子控件并寻找到最合适的view.寻找最合适的view的底层实现.拦截事件的处理)->找到最合适的view后 ...
- 为什么WebSphere好好的,他就不干活了?
“修理不好用的WebSphere,有时候要看运气.”这个是我接触过很过有历史的运维工程师经常说的一个梗;研发人员也经常说这个程序在我这里运行好好的,怎么到你那就不灵了?问题是你的,你自己解决. 声明一 ...
- 浅析.NET的反射特性
在.net框架体系内,反射特性较多的应用到.反射的相关定义分为两种. 自然解释:射是一种自然现象,表现为受刺激物对刺激物的逆反应:这是反射的字面解释,我们看一下计算机编程中的反射: 编程解释:通过 S ...
- SQL Server 数据缓存
引言 SQL Server通过一些工具来监控数据,其中之一的方法就是动态管理管理视图(DMV). 常规动态服务器管理对象 dm_db_*:数据库和数据库对象 dm_exec_*:执行用户代码和关联的连 ...
- springMVC学习笔记(二)-----注解和非注解入门小程序
最近一直在做一个电商的项目,周末加班,忙的都没有时间更新博客了.终于在上周五上线了,可以轻松几天了.闲话不扯淡了,继续谈谈springMvc的学习. 现在,用到SpringMvc的大部分使用全注解配置 ...
- jQuery-1.9.1源码分析系列（一）整体架构续
这一节主要是jQuery中最基础的几个东东 2. jQuery的几个基础属性和函数 a. jQuery.noConflict函数详解 在jQuery初始化的时候保存了外部的$和jQuery _j ...
- Oracle11g 配置 ST_GEOMETRY
安装环境:ArcGIS Desktop10.2.1 .ArcSDE10.2.134940. Oracle11.2.0.1 操作系统:Windows Server 2012R2 DataCenter 安 ...
- 《疯狂Java讲义》学习笔记——第2章 理解面向对象
面向对象的三种基本特征:继承,封装,多态 UML(统一建模语言) 2.1 面向对象 2.1.1 结构化程序设计简介 图2.1 结构化软件的逻辑结构示意图 从图2.1可以看出,结构化设计需要采用自顶向 ...