HTML表单格式化

HTML表单格式化

一、说明

用table布局

二、效果

三、代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Form.html</title>
 5
 6 <meta name="keywords" content="keyword1,keyword2,keyword3">
 7 <meta name="description" content="this is my page">
 8 <meta name="content-type" content="text/html; charset=UTF-8">
 9
10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11
12 </head>
13
14 <body>
15     表单格式化
16     <br>
17     <form action="">
18         <!--
19              cellpadding 属性规定单元边沿与其内容之间的空白。
20              注释:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属性规定的是单元之间的空间。
21              从实用角度出发,最好不要规定 cellpadding,而是使用 CSS 来添加内边距。
22          -->
23         <table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=400>
24         <!-- 由此可见,<th>和<td>标签都是用于表格单元格显示的。不同的是<th>在单元格中加粗显示。 -->
25             <tr>
26                 <!-- 占两列 -->
27                 <th colspan="2">注册表单</th>
28             </tr>
29             <tr>
30                 <td>用户名称</td>
31                 <td><input type="text" name="user" value=""><br /></td>
32             </tr>
33             <tr>
34                 <td>输入密码</td>
35                 <td><input type="password" name="pwd" /><br /></td>
36             </tr>
37             <tr>
38                 <td>确认密码</td>
39                 <td><input type="password" name="repwd" /><br /></td>
40             </tr>
41             <tr>
42                 <td>选择性别</td>
43                 <td>
44                     <input type="radio" name="sex" value="nan"  />男
45                     <input type="radio" name="sex" value="nv" checked="checked" />女<br />
46                 </td>
47             </tr>
48             <tr>
49                 <td>选择技术</td>
50                 <td>
51                     <input type="checkbox" name="tech" value="java" />JAVA
52                     <input type="checkbox" name="tech" value="html" />HTML
53                     <input type="checkbox" name="tech" value="css" />CSS <br />
54                 </td>
55             </tr>
56             <tr>
57                 <td>选择国家</td>
58                 <td>
59                     <select name="country">
60                         <option value="none" >--选择国家--</option>
61                         <option value="usa" >美国</option>
62                         <option value="en" >英国</option>
63                         <!-- 默认选择中国 -->
64                         <option value="cn" selected="selected">中国</option>
65                     </select>
66                 </td>
67             </tr>
68             <tr>
69                 <th colspan="2">
70                     <input type="reset" value="清除数据" />
71                     <input type="submit" value="提交数据"/>
72                 </th>
73             </tr>
74         </table>
75     </form>
76 </body>
77 </html>
时间: 2024-09-29 17:32:34

HTML表单格式化的相关文章

表单格式化

表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表格的结合不妨叫 做表单格式化. 这篇博客用到的HTML主要标签有:<table>标签和<form>标签以及两个标签中所包含的各个小标签.这些标签的使 用和效果在前面已经展示过了,就不再啰嗦了. 顾名思义,表单格式化就是将表单的内容以表格呈现.在写好表单的情况下,用表格将其内容存放.可能我的表述 还不明白,但是我现在理解的就是这样的.以后可能会有不一样的理解! 直接上代码: <!DOCTYP

表单格式化插件jquery.serializeJSON

前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦.接下来介绍的插件将解决这个问题. 关于serializeJSON 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象. 使用 只需要在jQuery或者Zepto时候引入即可 <s

CSS3-animation,表格表单的格式化

animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeIn(animationName) from{ } 50%{ } to{ } /*from起始关键帧,to结束关键帧,也可以用0%,100%分别表示起始与结束*/ oparity的值为0表示不可见,为1的时候表示完全可见 3.在元素中应用: .b{ animation-name:fadeIn: ani

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

PHP表单验证(1)

PHP验证 第一步:先获取表单传送过来的内容: $_POST[''];        //用这个函数来获取表单的数据,POST必须大写,中括号里面必须有单引号. 第二步:判断 1判断是否为正常提交: isset();       //用这个函数来判断是否设置(存在) 例:if(isset($_POST['username'])){ echo 正常提交:} else { echo 非正常提交 };     //输出命名为username的文本框里的内容的   使用isset()函数来验证是否正常提

angularJS 过滤器 表单验证

过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)Date(3)Filter子串匹配用来处理一个数组,可以过滤出含有某个子串的元素,作为一个字数组来返回.通常用来过滤需要展示的元素.可以是字符串数字,对象或是一个用来从数组中选择元素的函数.字符串:返回所有包含这个字符串的元素对象:将待过滤对象的属性同这个对象中的同名属性进行对比,如果属性值是字符串就

Django 表单

学习参考:http://www.runoob.com/django/django-form.html HTTP 请求 HTTP协议以"请求-回复"的方式工作.客户发送请求时,可以在请求中附加数据.服务器通过解析请求,就可以获得客户传来的数据,并根据URL来提供特定的服务. GET 方法 我们在之前项目的C:\Users\XCC\HelloWorld\HelloWorld路径下创建一个 search.py 文件,用于接收用户的请求: # -*- coding: utf-8 -*- fro