JavaScript 程序设计基础(02) -- 表单，常用的表单类型介绍，外部样式表
2014-12-24 22:50
591 查看
JavaScript中表单的属性 作用，常用的表单类型介绍，外部样式表等介绍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="description" content="提供百万部免费电影下载">
<meta name="keywords" content="手机特卖 低价手机 低价iPhone">
<!--网页搜索时，的关键字，不会显示在网页内容中-->
<title>表单</title>
<!--外部样式链接 所有样式都写在另外的外部样式文件中-->
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- action属性：处理表单的服务器程序 -->
<!-- method属性: 提交表单的方式 (get / post / put* / delete*)-->
<div id="myform" align="center">
<form action="aa" method="get">
<!-- 隐式表单域(隐藏域) -->
<input type="hidden" name="a" value="b" />
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td class="ra">用户名:</td>
<!--表单控件的name属性对服务器很重要-->
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td class="ra">密码:</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td class="ra">确认密码:</td>
<td><input type="password" name="repass" /></td>
</tr>
<!--加了checked 就是提前直接选定。自动单选分组了-->
<tr>
<td class="ra">性别:</td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" checked/>女
</td>
</tr>
<tr>
<td class="ra">爱好:</td>
<td>
<input type="checkbox" name="fav" />吃饭
<input type="checkbox" name="fav" checked/>睡觉<br/>
<input type="checkbox" name="fav" />旅游
<input type="checkbox" name="fav" />看书
</td>
</tr>
<tr>
<td class="ra">所在地区:</td>
<td>
<select name="prov">
<option>四川省</option>
<option>广东省</option>
<option>河南省</option>
<option selected>北京市</option>
</select>
</td>
</tr>
<tr>
<td class="ra">出生日期:</td>
<td>
<input type="date" name="birthday"/>
</td>
</tr>
<!--使用邮箱类型，客户端在输入时，输入法会有相应的改变（比如多出.com快捷按钮之类的-->
<!--其实和一般的输入框差不多-->
<tr>
<td class="ra">邮箱: </td>
<td>
<input type="email" name="email"/>
</td>
</tr>
<tr>
<td class="ra">头像: </td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td class="ra">自我介绍: </td>
<td>
<textarea rows="5" cols="30" name="intro"></textarea>
</td>
</tr>
<tr>
<td colspan="2" class="ca">
<input type="image" src="images/login.gif" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
外部样式表简单使用
.ra {text-align: right; color:blue;}
.ca {text-align: center;}
tr {line-height: 35px;}
#myform {width: 600px; background-color: antiquewhite;}
textarea {resize: none;}
input[type="text"], input[type="email"] { border:1px solid blue; }
input[type="password"] { border: 1px solid red; }
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="description" content="提供百万部免费电影下载">
<meta name="keywords" content="手机特卖 低价手机 低价iPhone">
<!--网页搜索时，的关键字，不会显示在网页内容中-->
<title>表单</title>
<!--外部样式链接 所有样式都写在另外的外部样式文件中-->
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- action属性：处理表单的服务器程序 -->
<!-- method属性: 提交表单的方式 (get / post / put* / delete*)-->
<div id="myform" align="center">
<form action="aa" method="get">
<!-- 隐式表单域(隐藏域) -->
<input type="hidden" name="a" value="b" />
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td class="ra">用户名:</td>
<!--表单控件的name属性对服务器很重要-->
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td class="ra">密码:</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td class="ra">确认密码:</td>
<td><input type="password" name="repass" /></td>
</tr>
<!--加了checked 就是提前直接选定。自动单选分组了-->
<tr>
<td class="ra">性别:</td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" checked/>女
</td>
</tr>
<tr>
<td class="ra">爱好:</td>
<td>
<input type="checkbox" name="fav" />吃饭
<input type="checkbox" name="fav" checked/>睡觉<br/>
<input type="checkbox" name="fav" />旅游
<input type="checkbox" name="fav" />看书
</td>
</tr>
<tr>
<td class="ra">所在地区:</td>
<td>
<select name="prov">
<option>四川省</option>
<option>广东省</option>
<option>河南省</option>
<option selected>北京市</option>
</select>
</td>
</tr>
<tr>
<td class="ra">出生日期:</td>
<td>
<input type="date" name="birthday"/>
</td>
</tr>
<!--使用邮箱类型，客户端在输入时，输入法会有相应的改变（比如多出.com快捷按钮之类的-->
<!--其实和一般的输入框差不多-->
<tr>
<td class="ra">邮箱: </td>
<td>
<input type="email" name="email"/>
</td>
</tr>
<tr>
<td class="ra">头像: </td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td class="ra">自我介绍: </td>
<td>
<textarea rows="5" cols="30" name="intro"></textarea>
</td>
</tr>
<tr>
<td colspan="2" class="ca">
<input type="image" src="images/login.gif" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
外部样式表简单使用
.ra {text-align: right; color:blue;}
.ca {text-align: center;}
tr {line-height: 35px;}
#myform {width: 600px; background-color: antiquewhite;}
textarea {resize: none;}
input[type="text"], input[type="email"] { border:1px solid blue; }
input[type="password"] { border: 1px solid red; }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【小松教你手游开发】【面试必读（编程基础）】几种常用的设计模式介绍
- 黑马程序员_Java基础_02常量、变量、数据类型、运算符、语句、程序执行过程
- C02-程序设计基础提高班（C++）第8周上机任务-结构体
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- JavaScript高级程序设计 第一章 javascript介绍
- 【JavaScript】DOM节点常用方法介绍02
- C02-程序设计基础提高班（C++）第6周上机任务-数组
- [FreeMarker 2.3.20] Part I 关于模版设计的介绍 ~值和类型~ 基础概念
- C02-程序设计基础提高班（C++）第6周上机任务-数组
- 【面试必读（编程基础）】几种常用的设计模式介绍
- MOOC 程序设计基础（C&C++） 戴波、张东祥 第二章 数据类型与表达式 作业
- 程序设计基础（C&C++） 戴波、张东祥 第二章 数据类型与表达式 编程作业
- JavaScript 程序设计基础(01) -- 创建对象的方式
- C02-程序设计基础提高班（C++）第8周上机任务-结构体
- C02-程序设计基础提高班（C++）第6周上机任务-数组
- C02-程序设计基础提高班（C++）第8周上机任务-结构体
- javascript的常用表单检查方法!
- 第一天：数据库设计--access数据类型介绍
- [JavaScript]几种常用的表单输入判断
- [转贴]40种网站设计常用技巧(Javascript)