一个简单的表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test regist</title> <link href="../css/add.css" rel="stylesheet" type="text/css"> </head> <body> <div class='content'> <header><h1>个人信息录入</h1></header> <form action=""> <fieldset> <legend>基本信息</legend> <ol> <li><label for='name'>姓名:</label><input id='name' type="text" placeholder="name" required autofocus></li> <li><label for='age'>年龄:</label><input id='age' type="number" placeholder="age" required> </li> <li> <ol> <li> <label for='sex-1'>男</label><input name='sex' id='sex-1' type="radio"> </li> <li> <label for='sex-2'>女</label><input name='sex' id='sex-2' type="radio"> </li> </ol> </li> </ol> </fieldset> <fieldset> <legend>地址</legend> <ol> <li><label for='country'>国家:</label> <select> <option value='1'>中国</option> <option value='2'>日本</option> </select> </li> <li><label for='city'>城市:</label><input id='city' type="text" placeholder="city" required> </li> </ol> </fieldset> <fieldset> <button type=submit>注册</button> </fieldset> </form> <footer>by xufei 2013/04</footer> </div> </body> </html>
css样式，里面有些 css3的东西
@CHARSET "UTF-8";
body {
background: #ffffff;
color: #111111;
}
header {
text-align: center;
}
footer {
text-align: center;
font-size: 14px;
margin-top: 10px;
}
select {
height:25px;
width:156px;
}
input {
-moz-border-radius: 3px;
-webkit-border-radius: 3px; /* 圆角 */
border-radius: 3px;
height:20px;
box-shadow: 0 0 3px #aaa; /* 阴影 */
}
.content {
width : 800px;
height: 100%;
border: 1px solid;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
}
form {
background: #9cbc2c;
border-radius: 5px;
padding: 20px;
width: 400px;
margin-left: auto;
margin-right: auto;
}
/* 表单分组 */
form fieldset {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
}
/* 表单分组 最后一个 */
form fieldset:last-of-type {
margin-bottom: 0;
border:none;
text-align:center;
}
/* 表单分组 的标题 他的位置根据fieldset的 text-align:center决定*/
form legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 5px;
text-shadow: 0 1px 1px #c0d576;
}
form label {
float: left;
width: 110px;
}
form fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form fieldset label:hover {
cursor: pointer;
}
form ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
float: left;
}
form ol ol {
padding-left: 5px
}
form ol ol li {
background: none;
border: none;
float: left;
}
form ol ol li label{
background:none no-repeat left 50%;
line-height: 20px;
width: auto;
}
/* 提交按钮 */
form button {
width:100px;
height:30px;
font-weight: bold;
color: #2D2D2D;
font-size: 14px;
text-shadow: 0px 1px 1px #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgb(160,160,160);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(253,253,253)), to(rgb(190,190,190))); /* 渐变 在webkit核心浏览器下(Safari4+, Chrome) */
background: -moz-linear-gradient(top, rgb(253,253,253), rgb(190,190,190)); /* */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FDFDFD,endColorstr=#BEBEBE); /* IE */
cursor: pointer;
text-decoration: none;
}
/* 鼠标放到按钮上时，按钮的样式 */
form button:hover {
background: rgb(190,190,190 );
text-decoration: none;
color: #000;
}
以上代码只在 google的Chrome下测试过
整个页面看起来跟用VB做出的效果很像
说明：
1，fieldset 元素可将表单内的相关元素分组。跟VB的一样，很好用的标签
2，渐进效果让按钮看起来更立体，就像有个图片背景似的
3，button:hover；鼠标放到按钮上时，改变按钮的样式
4，html5的表单input还自带一些页面验证的功能，例如：type是number时自动验证是不是数字，还有一个必须输入的属性required
关于验证的部分，下次一个一个实验
相关推荐
HTML的学习不仅仅限于这些基础标签，还包括表格、图像、链接、表单、框架等更复杂的元素。理解并熟练运用这些基本元素是构建网页的基础，通过不断实践和学习，可以创建出功能丰富、设计精美的网页。
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
13. **表单元素**：如果main.html包含表单，我们会看到`<form>`、`<input>`、`<textarea>`、`<select>`、`<button>`等元素，它们用于用户输入和数据提交。 以上就是从"html_html_"项目中的main.html文件名可能涉及...
ViewState的工作原理相当简单：在服务器端，当ASP.NET页面执行时，页面上所有控件的状态（比如Label控件的文本）会被序列化成一个加密的字符串，然后放入一个隐藏的HTML表单字段中。这个隐藏字段随着页面一起发送到...
2. home.html：用户成功登录后显示的主页，其中的用户名将通过NodeJS后端动态生成。 ```html <!DOCTYPE html> <html lang="en"> body { text-align: center; } span { color: blue; } <span>{...
08.使用表单和框架_理论2 09.使用表单和框架_上机 10.使用DW制作网页_理论1 11.使用DW制作网页_理论2 12.使用DW制作网页_上机 13.Web前台CSS技术详解_理论1 14.Web前台CSS技术详解_理论2 15.Web前台CSS技术详解_上机...
2. 代码优化：减少冗余代码，使用有效的CSS选择器和合理的HTML结构，提高页面加载速度。 3. 交互体验：添加用户友好的交互元素，如清晰的导航、有效的反馈提示等。 4. SEO优化：合理使用HTML元标签，提供有意义的URL...
《移动开发者必备工具：开源jqTouch初探》 在当今技术日新月异的时代，移动设备的普及催生了大量针对这些平台的应用程序开发需求。尤其是苹果的iPhone、iTouch和iPad，它们引领了移动设备的新潮流。然而，苹果官方...
Freemarker是一个强大的模板引擎，常用于Web应用中的视图层渲染，与Struts2等MVC框架结合使用。在本篇文章中，我们将探讨Freemarker的基础知识，并结合Struts2中的checkboxlist进行研究。 首先，让我们理解...
这份文档可能涵盖了如何创建ASP页面、如何在页面中嵌入脚本、如何使用Response和Request对象与用户交互、如何处理表单数据、如何使用Session和Application对象来管理用户状态等内容。 总的来说，ASP初探的学习将带...
例如，用户可以通过HTML表单（FORM）上传图片，Servlet处理表单数据，实现图片的上传。同时，JSP页面也可以设计成包含图片列表的形式，展示数据库中存储的所有图片。 总的来说，结合JSP和MySQL数据库，可以实现高效...
《Flask实践：基于Jinja2模板的微型博客系统初探》 Flask是一个轻量级的Python Web框架，以其简洁、灵活的特性深受开发者喜爱。在这个“microblog-0.3.zip”项目中，我们将深入探讨如何使用Flask与Jinja2模板引擎...
1.4 Web项目中使用Struts2初探 开始使用Struts2涉及设置环境、创建第一个Action、编写JSP页面、配置Struts2的XML文件以及集成其他组件，例如数据库访问、拦截器等。 **第 2 章 Web基础知识** 2.1 B/S和C/S系统区别...
【HTML网页制作初探】 HTML，全称HyperText Markup Language，是用于创建网页的标准标记语言。对于初学者来说，HTML是构建网页的基础，它通过一系列的标签来定义网页的结构和内容。在这个“班级编程大赛”中，学生...
- **1.4 Web项目中使用Struts2初探** - **知识点**: 介绍了如何开始使用Struts2搭建Web项目。 - **核心内容**: - 安装和配置Struts2的基本步骤。 - 创建第一个简单的Struts2项目示例。 #### 第2章 Web基础技术...
【HTML5页面初探】 HTML5是超文本标记语言（HyperText Markup Language）的第五个主要版本，它在2014年正式成为W3C的推荐标准，为Web开发带来了许多新的特性和改进。这个“CV：这是我的第一个HTML5页面”是一个初学...
- 校验：Struts2提供了强大的表单验证机制，可以通过注解或XML配置实现数据验证。 - 国际化：Struts2支持多语言环境，方便创建全球化Web应用。 - SiteMesh：Struts2整合了SiteMesh，用于实现页面布局和装饰功能，...