html表单代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<!-- <form method="post" action="server.html">
<input type="text" name="username1"/>
<input type="password" name="passwd"/>
<input type="submit" value="提交" />
</form>--> <form method="get" action="server.html">
<!--(只有在form表单时有效)name:提交表单时此文本框的值value存储在name变量中,并传给后台服务器,我们可以通过请求头信息查看-->
文本标签1：<input type="text" value="zhangsan" maxlength="5" name="u1" tabindex="5"/><br/>
文本标签2：<input type="text" value="zhangsan" maxlength="5" name="u2" tabindex="3"/><br/>
文本标签3：<input type="text" value="zhangsan" maxlength="5" name="u3" tabindex="2"/><br/>
文本标签4：<input type="text" value="zhangsan" maxlength="5" name="u4" tabindex="1"/><br/>
文本标签5：<input type="text" value="zhangsan" maxlength="5" name="u5" tabindex="4"/><br/> <!--
按钮标签：<input type="button" value="注册" name="btn"/><br/>
图片标签：<input type="image" value="图片" name="img"/><br/>
--> <hr/>
<!--input disabled 禁用 ,不光这个输入框不能使用，且值也不能传输到服务器,tabindex也不起作用-->
<input type="text" disabled="disabled" name="disabled" value="dsiabled" /><br/>
<!--input readonly 只读 只是输入框不能操作修改，但是值能传输到服务器 ,tabindex起作用 -->
<input type="text" readonly="readonly" name="readonly" value="readonly" /><br/> <!--input type="password"-->
<input type="password" value="123456"/><br/><hr/> <!--textarea:文本区 多行文本输入框 一个中文字符占两列，
在没超过指定行数的时候,可能会看到输入的列数多一列字的效果，不同浏览器，效果不同
特点：没有value属性，内容是初始化在标签之间
没有maxlength属性
使用rows和cols属性指定行数和列数。
注意：6行6列的多行文本框，在不显示滚动条的情况下最多显示36个英文字符，或者18个中文字符。
-->
<textarea rows="6" cols="6" maxlength="20" name="textarea">qwer</textarea><br/> <!--select 列表框
selected属性 是设置默认值，即被选中的值 -->
<select name="select">
<option value="china">中国</option>
<option value="USA">美国</option>
<option value="UK" selected="selected">英国</option>
</select> <select>
<option value="hp">黄埔</option>
<option value="pd">浦东</option>
<option value="xh">徐汇</option>
</select><br/> <!--optgroup 对选项分组-->
<select>
<optgroup label="上海">
<option>外滩</option>
<option>南京东路</option>
<option>东明明珠塔</option>
</optgroup>
<optgroup label="合肥">
<option>逍遥津</option>
<option>地质博物馆</option>
<option>植物园</option>
</optgroup>
</select><br/> <select size="5" multiple="multiple">
<option>上海</option>
<option>北京</option>
<option>天津</option>
<option>深圳</option>
<option>广东</option>
<option>常州</option>
<option>温州</option>
<option>厦门</option>
</select><br/> <!--单选按钮-->
男:<input type="radio" value="man" name="sex"/>
女:<input type="radio" value="woman" name="sex"/><br/> <!--多选框 checkbox-->
爱好：<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="Songs" name="hobby">听歌
<input type="checkbox" value="playComputer" name="hobby">玩电脑
<input type="checkbox" value="sing" name="hobby">唱歌
<input type="checkbox" value="run" name="hobby">跑步<br/> <!--一般按钮-->
<input type="button" value="一般按钮"/><br><hr> <!--图片按钮-->
<input type="image" src="../img/111.jpg" alt="图片按钮" style="width: 50px;height: 50px;" title="美女图片"/><br/><br/> <!--隐藏类型 hidden只是在页面中不显示，用户看不见，但不代表没有，传给服务器的时候，数据仍传送 -->
<input type="text" value="nohidden"/>
<input type="hidden" value="hidden" name="hidden" />hidden跑哪去了<br/> <!--for标签-->
<label for="man">男:</label><input type="radio" value="man" name="sex" id="man"/>
<label for="woman">女:</label><input type="radio" value="woman" name="sex" id="man"/><br/> <br/>
<!--分组框fieldset-->
<fieldset style="width:280px">
<legend>QQ注册</legend>
<ul style="list-style: none;">
<li><label for="username">用户名:</label><input type="text" name="username" id="username"/></li>
<li><label for="password">密 码:</label><input type="password" name="password" id="password"/></li>
</ul>
<ol style="list-style: none;">
<li><label for="username">用户名:</label><input type="text" name="username" id="username"/></li>
<li><label for="password">密 码:</label><input type="password" name="password" id="password"/></li>
</ol>
</fieldset> <!-- <fieldset style="width:280px">
<legend>QQ注册</legend>
<div>
<label for="username">用户名:</label><input type="text" name="username" id="username" style="margin-left: 1px;"/>
</div>
<div>
<label for="password">密 码:</label><input type="password" name="password" id="password" style="margin-left:3px"/>
</div>
</fieldset> --> <fieldset style="width:280px">
<legend>QQ登录</legend>
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td><label for="password">密 码:</label></td>
<td><input type="password" name="password" id="password"/></td>
</tr>
</table>
</fieldset> <fieldset style="width:320px;height:187px;margin-left: 530px;">
<legend>QQ上线</legend>
<div style="margin-left: 41px;margin-top: 50px;">
<label for="username2">用户名:</label><input type="text" name="username2" id="username2"/>
</div>
<div style="margin-left: 41px;margin-top: 6px;">
<label for="password2">密码:</label><input type="password" name="password2" id="password2" style="margin-left: 16px;"/>
</div>
</fieldset> <br/><hr/> <frameset cols="200px,20%,*">
<frame src="#"/>
<frame src="#"/>
<frame src="#"/>
</frameset> <br/><input type="submit" value="提交" /> <input type="reset" value="重置"/>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<h1>这里是服务器接受页面！！！</h1>
</body>
</html>
html表单代码演示的更多相关文章
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 基于jQuery商品分类选择提交表单代码
分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览 源码下载 实现的代码: <div class="yList ...
- 表单：!!!常用JS： form 表单代码
手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...
- jquery验证表单代码
代码如下: //开始验证-修改用户密码 $('.editUserPwd').validate({ /**//* 设置验证规则 */ rules: { lname:{ required:true, st ...
- 有用的dede表单代码
<form action="" class="demoform"> <table> ...
- ExtJS4.2学习(16)制作表单(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-10/188.html --------------- ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
随机推荐
- PAT 1142 Maximal Clique
A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the ...
- [bzoj2431][HAOI2009][逆序对数列] (dp计数)
Description 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆 ...
- JavaSE 学习笔记之集合框架（十八）
集合框架:,用于存储数据的容器. 特点: 1:对象封装数据,对象多了也需要存储.集合用于存储对象. 2:对象的个数确定可以使用数组,但是不确定怎么办?可以用集合.因为集合是可变长度的. 集合和数组的区 ...
- 用信号量及其PV操作处理实际问题
43.现有3个生产者P1.P2.P3,他们都要生产橘子汁,每个生产者都已分别购得两种不同的原料,待购齐第三种原料后就可配制成橘子汁装瓶出售.有一供应商能源源不断的供应糖.水.橘子精,但每次只拿出一种原 ...
- GCC编译uboot出现(.ARM.exidx+0x0): undefined reference to `__aeabi_unwind_cpp_pr0'错误的解决的方法
/opt/arm-2010.09/bin/../lib/gcc/arm-none-linux-gnueabi/4.5.1/armv4t/libgcc.a(_bswapsi2.o):(.ARM.exid ...
- .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console
.net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...
- CloudEngine 6800基础配置-01_常见密码操作
由于工作原因,现在从事公有云. 这简直就是个笑话,12年后又回来学网络知识. # 设置系统的日期.时间和时区 <HUAWEI> clock timezone BJ add 08:00: ...
- hdu 4549 M斐波那契数列（矩阵高速幂，高速幂降幂）
http://acm.hdu.edu.cn/showproblem.php?pid=4549 f[0] = a^1*b^0%p,f[1] = a^0*b^1%p,f[2] = a^1*b^1%p... ...
- poj 1190 生日蛋糕 , 强剪枝
题意: 制作一个体积为Nπ(N<=10000)的M(M<=20)层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆 ...
- 通达信版F10检索工具下载
通达信版的F10採用的是维赛特的F10资料. 维赛特的F10资料请前往:http://www.vsatsh.cn/xzzq.aspx 下载. 通达信版的F10检索工具下载地址:http://pan. ...