HTML表单格式化

一、说明

用table布局

二、效果

三、代码

 <!DOCTYPE html>

 <html>

 <head>

 <title>Form.html</title>

 <meta name="keywords" content="keyword1,keyword2,keyword3">

 <meta name="description" content="this is my page">

 <meta name="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 </head>

 <body>

     表单格式化

     <br>

     <form action="">

         <!--

              cellpadding 属性规定单元边沿与其内容之间的空白。

              注释：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。

              从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

          -->

         <table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=400>

         <!-- 由此可见，<th>和<td>标签都是用于表格单元格显示的。不同的是<th>在单元格中加粗显示。 -->

             <tr>

                 <!-- 占两列 -->

                 <th colspan="2">注册表单</th>

             </tr>

             <tr>

                 <td>用户名称</td>

                 <td><input type="text" name="user" value=""><br /></td>

             </tr>

             <tr>

                 <td>输入密码</td>

                 <td><input type="password" name="pwd" /><br /></td>

             </tr>

             <tr>

                 <td>确认密码</td>

                 <td><input type="password" name="repwd" /><br /></td>

             </tr>

             <tr>

                 <td>选择性别</td>

                 <td>

                     <input type="radio" name="sex" value="nan"  />男

                     <input type="radio" name="sex" value="nv" checked="checked" />女<br />

                 </td>

             </tr>

             <tr>

                 <td>选择技术</td>

                 <td>

                     <input type="checkbox" name="tech" value="java" />JAVA

                     <input type="checkbox" name="tech" value="html" />HTML

                     <input type="checkbox" name="tech" value="css" />CSS <br />

                 </td>

             </tr>

             <tr>

                 <td>选择国家</td>

                 <td>

                     <select name="country">

                         <option value="none" >--选择国家--</option>

                         <option value="usa" >美国</option>

                         <option value="en" >英国</option>

                         <!-- 默认选择中国 -->

                         <option value="cn" selected="selected">中国</option>

                     </select>

                 </td>

             </tr>

             <tr>

                 <th colspan="2">

                     <input type="reset" value="清除数据" />

                     <input type="submit" value="提交数据"/>

                 </th>

             </tr>

         </table>

     </form>

 </body>

 </html>

HTML表单格式化的更多相关文章

  1. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  2. 表单格式化插件jquery.serializeJSON

    前言 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常 ...

  3. 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON

    简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...

  4. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...

  5. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

  6. CSS3-animation，表格表单的格式化

    animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeI ...

  7. iOS开发笔记11:表单键盘遮挡、浮点数价格格式化显示、省市区选择器、View Debugging

    1.表单键盘遮挡 应用场景为一个collectionView上有多个textfield.textView供用户填写信息. 之前输入项较少时,采取的方法比较粗暴,didSelectItemAtIndex ...

  8. 杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示

    1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...

  9. 表单序列化json字符串和js时间格式化

    js时间格式化 new Date().format("时间格式") Date.prototype.format = function(fmt) { var o = {        ...

随机推荐

  1. zw版【转发·台湾nvp系列Delphi例程】HALCON LocalMin1

    zw版[转发·台湾nvp系列Delphi例程]HALCON LocalMin1 zw版[转发·台湾nvp系列Delphi例程]HALCON LocalMin1 procedure TForm1.But ...

  2. Linux其他: GitBash

    git bash是Windows下的命令行工具 安装后在任何一个文件夹下右键GitBash,打开一个窗口,ssh root@xx.xxx.xxx.xx登陆到服务器,输入yes,和登陆密码可以使用敲命令 ...

  3. Unity VR编辑器――如上帝般创建VR内容,Project Soli google用雷达识别手势体积相当于一张 Mini SD 内存卡

    Unity VR编辑器――如上帝般创建VR内容在GDC的一个活动中,Unity首席设计师Timoni West展示了最新的Unity VR编辑器的原型系统,让你如上帝般创建VR应用,从一片空白场景开始 ...

  4. 简化document.createElement("div")动态生成层方法

    我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性.比方说我们想要建立一個 div 层,则可以使用以下代码实现. 一.直接建立functi ...

  5. Secure CRT 自动记录日志log配置

    SecureCRT8.0的下载地址下载地址: 链接:https://pan.baidu.com/s/1i5q09qH 密码:4pa2 配置自动log操作如下: 1.options ---> Se ...

  6. python之路----常用模块一

    re模块 https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/ 这是京东的注册页面,打开页面我们就看到这些要求输入个人信息的提示. ...

  7. ajax原理和XmlHttpRequest对象

    Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这 ...

  8. 手撕vue-cli配置——webpack.base.conf.js篇

    在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...

  9. （五）使用GitHub的前期准备

    创建账户 创建账号成功后将得到一个个人的公开页面URL:https://github.com/xkfx. 设置头像 设置SSH Key SSH 为 Secure Shell 的缩写. from bai ...

  10. 20145305 《网络对抗》Web基础

    实践过程及结果截图 Apache 简单的网页编写 javascript相关 PHP测试 MySQL基础 php+mysql 登录成功信息: 登录失败信息: SQL注入 XSS攻击 基础问题回答 (1) ...