07_05表单Demo1

最新推荐文章于 2021-11-12 09:37:44 发布
最新推荐文章于 2021-11-12 09:37:44 发布
阅读量423 收藏
点赞数
分类专栏： XHTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cigarangle/article/details/39291869
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用table来布局的演示</title>
<style type="text/css" media="all">

* {
  margin:0;
  padding:0;
}

table {
   border-collapse:collapse;
}

input,select {
   font-family:Arial, Helvetica, sans-serif; 
   font-size: 12px;
}

.required {
  font:0.8em Verdana !important;
  color:#f68622;
}

.explain {
  color:#808080;
}

.b {
  font-weight:bold;
  font-size:12px;
}

.democss table{
  font:11px/12px Arial, Helvetica, sans-serif;
  color:#333;
  width:420px;
}

.democss caption {
  display:none;
}

.democss th {
  font-weight:normal;
  text-align:right;
  vertical-align:top;
  padding:4px;
  padding-top:8px;
  width:110px
}

.democss td {
  text-align:left;
  padding:4px;
  width:294px;
}

.democss input {
  width:180px;
}

.democss select#content {
  width:185px;
}

.democss input.submit {
  width:70px;
}

</style>
</head>

<body>
<form id="demoform" class="democss" action="">

<table summary="使用table来布局的演示" id="demo">

<caption>
Registration example form
</caption>

<tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
<td><input type="text" id="lname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
<td>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option> 
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th>
<td>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th>
<td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th>
<td>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th>
<td><input type="password" value="" id="pw2"/></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td>
</tr>
</table>
</form>
</body>
</html>

大史叔叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
06_02.绝对定位absolute、层级
大史哥哥
08-22 4038
Document /* 1.元素设置position:absolute后，元素脱离文档流 2.元素设置position:absolute后，元素具有float的特性 3.元素设置position:absolute后，元素以最近的已设置position属性的父级元素为基准进行偏移；如没有符合条件的父级元素，则以整个文档为基准 4.层级用z-index:[number]设置，数
demo_form.php,JavaScript 表单
weixin_35521120的博客
03-11 1013
JavaScript 表单JavaScript 表单验证HTML 表单验证可以通过 JavaScript 来完成。以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：JavaScript 实例functionvalidateForm(){varx=document.forms["myForm"]["fname"].value;if(x==null||x==...
angularJS1 提交form表单demo
xiejunna的博客
12-21 5232
demo.html<!doctype html> <html> <head> <meta charset="utf-8"> <title>form demo</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0
layui表单验证demo
Visant Blog
11-30 3373
表单验证方法很多，使用layui插件自带的验证写法也是很简单。首先到官网http://www.layui.com/下载layui插件，然后按照官方提供的API编写前台页面就可以了，下面提供一个layui.form验证的例子。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
前端HTML入门之表单demo练习实例 --源码
faith_girl的博客
11-12 964
demo-表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
iView 循环表单验证Demo
roamingcode的博客
08-17 5129
如果项目使用的是vue+iview组合,那么对于表单验证便无需借助第三方插件,iview自己带有封装好的表单验证,iview表单验证依赖于 async-validator,这个库可以好好看一下,可扩展性比较强. javascript 代码 &lt;template&gt; &lt;div style="width: 700px; margin: 0 auto;"&gt; ...
Ext_Demo.rar_DEMO_Ext demo_ext_demo_java ext demo_javaext demo
09-24
【标题】"Ext_Demo.rar_DEMO_Ext demo_ext_demo_java ext demo_javaext demo" 指示了一个关于Java与EXT.js集成的演示项目。EXT是一个强大的JavaScript库，用于构建富客户端应用程序，而Java通常在后端提供数据和服务...
demo_canvas_DEMO_
09-30
在“demo_canvas_DEMO_”这个示例中，你将有机会实践这些概念，通过查看和运行“demo”文件来理解canvas绘图和表单的综合应用。这个DEMO可能会包含如何绘制图形、响应用户输入、处理表单数据等多个方面，是一个很好...
DWRDemo.rar_DEMO_dwr Demo
09-20
**1. DWR的基本概念** DWR的核心是远程方法调用（Remote Method Invocation, RMI），但它是在Web环境中的实现。DWR允许JavaScript代码在用户浏览器中直接调用服务器端的Java方法，使得前端与后端的交互变得更加实时...
SpringMVC Demo_java_springmvc_DEMO_
10-02
1. **环境配置**：首先，我们需要一个Java开发环境，如JDK，并确保安装了Apache Maven或Gradle作为构建工具。SpringMVC依赖于Spring框架，因此需要在项目中引入相应的依赖。在Maven的pom.xml文件或Gradle的build....
sonorkvb_demo_sonork_DEMO_
10-02
本文将深入探讨“sonorkvb_demo_sonork_DEMO_”这个压缩包中的VB（Visual Basic）客户端源码，带领读者走进Sonork即时通讯软件的世界，揭示其背后的编程技术和设计理念。 首先，我们来看一下关键文件： 1. `mMain....
06_04.遮罩效果（滤镜+div）
大史哥哥
08-23 893
Document body{margin: 0;} .cover{width: 100%;background: black; height: 100%;position: absolute;top: 0;left: 0;} /*滤镜*/ .cover{opacity: 0.5;} /*兼容IE7、8*/ .cover{filter:alpha(opacity:50);} /*
04_01.float
大史哥哥
05-29 501
Document .a{width: 100px;height: 100px;background: red;float: left;} .a1{width: 50px;height: 50px;background: black;} .b{width: 200px;height: 200px;background: blue;} .b1{width: 120px;heig
03_03.inline-block
大史哥哥
05-29 489
Document img{width: 100px;height: 50px;} div{display: inline-block;width: 100px;height: 100px;background: red;} span{display: inline-block;width: 100px;height: 100px;background: blue; } 1
01_02.设置编辑器编码
大史哥哥
05-14 467
本人所用为sublime编辑器。设置sublime编码格式：1.ctrl+alt+p 2.输入"settings-default" 3.查找"default_encoding"  4. 将其值改为"utf-8"
03_02.块元素与内联元素
大史哥哥
05-29 448
Document /*块元素*/ body,h1,h6,p,dl,dd{margin: 0;} h1{width: 100px;height: 100px;background: red;} p{width: 100px;height: 100px;background: blue;} ul,ol{margin: 0;padding: 0;} ul{width:
05_02.IE6双边距bug
大史哥哥
07-31 424
Document body{margin: 0;} .wrap{float: left;border: 10px solid red;background: yellow;} /* bug：当子块级元素有浮动且有横向margin值时，子块级元素在浮动方向的margin值，扩大两倍。 解决方法：如下注释部分↓↓ */ .box{float: left;wid
02_04.选择器优先级
大史哥哥
05-19 399
1.相同的选择器，在样式表内，后者会覆盖前者。
c++ 利用libcurl使用表单 demo
最新发布
02-07
使用libcurl进行表单传输的demo如下： 首先，我们需要引入libcurl的头文件，并链接libcurl的库文件。然后创建一个C或C++的源文件，在源文件中编写表单传输的代码。 首先创建一个CURL对象，使用curl_easy_init()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值