<!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. np.tile(), np.repeat() 和 tf.tile()

    以上三个函数,主要区别在于能够拓展维度上和重复方式: np.tile() 能够拓展维度,并且整体重复: a = np.array([0,1,2]) np.tile(a,(2,2)) # out # a ...

  2. react入门----(this.state/表单/Ajax)

    1.this.state 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI var TestStat ...

  3. [ural1057][Amount of Degrees] (数位dp+进制模型)

    Discription Create a code to determine the amount of integers, lying in the set [X; Y] and being a s ...

  4. MaxScale初探

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://mrcto.blog.51cto.com/1923168/1437287 内容预览 ...

  5. 1874 Bellman-ford算法 队列优化过的 用于稀疏图，有负权的图

    #include<stdio.h> #include<algorithm> #include<iostream> #include<queue> usi ...

  6. project处理 InteropServices.COMException 异常

    project文件无法上传,在上传中的hangfire出现了这个异常 System.Runtime.InteropServices.COMException 这个是因为website的权限是IUser ...

  7. TDSTCPServerTransport 的Filters

    TDSTCPServerTransport 的Filters TDSTCPServerTransport 的 Filter 属性,可以对传递的数据进行加密,压缩,再修改等,有 点注入的概念.默认情况下 ...

  8. GDIPlus绘制桌面歌词

    功能介绍 採用GDIPlus绘制桌面歌词,相似酷狗.QQ音乐等软件.歌词支持纯色.两色渐变.三色渐变:支持高亮歌词. 实现方法 窗体部分:桌面歌词是个独立的背景透明窗体.能够移动位置,能够鼠标穿透.透 ...

  9. ganglia收集hbase的metrics

    Ganglia 是 UC Berkeley 发起的一个开源监视项目,设计用于測量数以千计的节点.每台计算机都执行一个收集和发送度量数据(如处理器速度.内存使用量等)的名为 gmond 的守护进程.它将 ...

  10. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...