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>

  

时间: 2024-08-17 06:15:27

html表单代码演示的相关文章

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

基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="Safety"> <dl> <dt> <strong>登录密码:</strong> <span>保障账户安全,建议您定期更换密码</span> <b><span

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

分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="demo"> <nav class="main_nav"> <ul> <li><a class="cd-signin" href="#0">登录</a></li&

网页自动登录,自动填充表单代码

实现自动登录某网站,并且登录完成后跳转到指定的页面.然后进行表单的自动填充表单提交 .类型于小型的发帖机 哈哈 (看官在看下面代码的时候,把记得把下面的链接改下) public partial class Form1 : Form { public Form1() { InitializeComponent(); webBrowser1.Navigate("www.tiantianit.com"); } private void webBrowser1_DocumentComplete

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

分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yListr"> <form> <ul> <li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <e

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

!!!常用JS: 表单代码

checkbox (复选框)取值 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#form").submit(function(){//表单提交:复选框取值 var obj=$('input:checkbox[name=&qu

Mvc利用Html.BeginForm 提交表单代码详解

js验证表单数据合法性代码 $(function () { $("#btnApplication").click(function () { var imageurl = $("#SXtPhoto").val(); var desc = $("#tDesc").val(); var type = $("#type").val(); if (imageurl == "") { alert("请上传照

用户界面框架jQuery EasyUI示例大全之进度栏、搜索框及表单演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本的进度栏 本演示主要展示了基本的进度栏,点击按钮可以显示进度信息.[另附源代码供大家参考] |在线Demo 流体进度条 本演示主要展示了如何将进度条的宽度设置为其父容器的百分比.[另附源代码供大家参考] |在线Demo 基本的搜索框

Javascript中的Form表单知识点总结

在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,因此与其他HTML元素具有相同的默认属性:HTMLFormElement有自己以下属性和方法: acceptCharset: 服务器能够处理的字符集:等价于HTML中的accept-charset特性: action:  接收请求的URL,等价于HTML中的action elements: 表单中所有控件的集合. enctype: 请求的编码类