<!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表单代码演示的更多相关文章

  1. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  2. 基于jQuery会员中心安全修改表单代码

    基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  3. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  4. 表单：!!!常用JS： form 表单代码

    手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...

  5. jquery验证表单代码

    代码如下: //开始验证-修改用户密码 $('.editUserPwd').validate({ /**//* 设置验证规则 */ rules: { lname:{ required:true, st ...

  6. 有用的dede表单代码

    <form action="" class="demoform">                <table>             ...

  7. ExtJS4.2学习(16)制作表单(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-10/188.html --------------- ...

  8. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  9. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

随机推荐

  1. 网络基础——OSI参考模型

    一.OSI/ISO/IOS傻傻分不清楚 ISO 国际标准化组织(International Organization for Standardization)简称ISO,是一个全球性的非政府组织,是国 ...

  2. Ubuntu notes

    ubuntu notes Table of Contents 1. backup data 2. Basics Ubuntu 3. Install, uninstall packages 4. Bas ...

  3. 洛谷 2449 [SDOI2005]矩形

    [题解] 因为这道题中n比较小,n^2效率是可以接受的. 枚举两个矩形,如果它们有重叠部分,就用并查集合并一下即可. #include<cstdio> #include<algori ...

  4. BZOJ 4819 Luogu P3705 [SDOI2017]新生舞会 (最大费用最大流、二分、分数规划)

    现在怎么做的题都这么水了.. 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4819 (luogu) https://ww ...

  5. iOS攻城狮修炼之路

    自己总结的学习iOS的笔记,打造一个全面的知识体系,iOS攻城狮修炼之路[持续更新中] iOS学习笔记01-APP相关 iOS学习笔记02-UIScrollView iOS学习笔记03-UITable ...

  6. Bellman-ford算法的学习http://blog.csdn.net/niushuai666/article/details/6791765

    http://blog.csdn.net/niushuai666/article/details/6791765

  7. [K3Cloud2.0]如何解决创建管理中心失败的问题

    标题有点大,实际上,Cloud2.0产品质量还是顶呱呱的,至于在安装使用过程中出现的这个管理中心无法创建的问题,实际上是与我的网络环境有关,下面讲一下我的网络环境: 开发团队目前所在网段:10.30. ...

  8. python中实现将普通字典dict转换为java中的treeMap

    上代码: from heapq import heappush,heappop from collections import OrderedDict def toTreeMap(paramMap): ...

  9. UML中类图的四种关系及其代码实现

    在uml图中 最复杂的也就是泛化,实现.依赖,关联.这四种关系了,假设弄清了这几种关系那么在理解UML图的时候就会变得轻车熟路了! 假设你对着几种关系一点都不熟悉的话能够看一下uml中的四种关系.这篇 ...

  10. jsoncpp的生成和使用

    从github下载jsoncpp-master 在执行\jsoncpp-master\makefiles\msvc2010文件夹下jsoncpp.sln 会有3个项目 执行lib_json项目生成li ...