javaweb_表单设计_java表单特长设计-CSDN博客

本文链接：https://blog.csdn.net/weixin_43801116/article/details/102483680

表单设计

一、表单标记

<form>...</form>
1、<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容。
2、基本格式
<form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post|get" ></form>
3、常用属性
1）、name：表单名称；
2）、method：传送数据的方式，分为post和get两种方式	；
post方式：将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制；
get方式：会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性；
3）action：表单数据处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为“no”；
4）enctype：设置表单的资料的编码方式；
5）target：和超链接的属性类似，用来指定目标窗口

二、文本框和密码

<input>标记
1、<input>标记没有结束标记
2、基本语法
<input type="" name=""value="" size="" maxlegth="">
3、属性介绍	
1)	type：type属性有两个值
	text：当type=“text”时，<input>表示一个文本输入域；
	password：当type=“passwordtext”时，<input>表示一个密码输入；
2）name属性：定义控件的名称；
3）value属性：初始化值，打开浏览器时，文本框内的内容；
4）size属性：设置控件的长度；
5）maxlength属性：输入框中最大允许输入的字符数

三、提交、重置、普通按钮

（放在表单内，表单外只是普通按钮）
1、提交：当<input  type="submit">时
2、重置：当<input  type="reset">时
3、普通：当<input  type="button">时

四、单选框和复选框

1、单选按钮：当<input  type="radio">时
2、复选框：当<input  type="checkbox">时
3、注意：单选框和复选框都可以使用“checked”属性来设置默认选中项

五、隐藏域

当当<input  type="hidden">时，为隐藏表单域

六、多行文本域

1、用法：使用<textarea>标记可以实现一个能够输入多行文本的区域
2、语法格式：<textarea name="name" rows="value" cols="value" value="value">.....</textarea>
3、rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

七、菜单下拉列表域

<select>标记<option>选项

八、代码块

<head>
	<title>      </title>
	</head>
	<body>
		<form  action="" method="post" enctype="application/x-www-form-urlencoded">
			账号：<input type="text"  name="userId" value="张山" size="100" /><br/>
			密码：<input type="password"  name="userPassword" value="" maxlength="6" /><br/>
			<input type="submit"  value="登陆" />
			<input type="reset"  value="重置" /><br/>
			<!-------单选框--------->
			性别：
			<input type="radio" name="sex"value="男"/>男
			<input type="radio" name="sex" value="女"   checked="checked"/>女
			<!---------checked为默认值----------->

			<！---------复选框------------>
			兴趣爱好：
			<input type="checkbox" name="xq" value="lol"/>lol
			<input type="checkbox" name="xq" value="dota"/>dota
			<input type="checkbox" name="xq" chencked="checked" value=小说"/>小说<br/>
			 
			 头像：<input type="file"/><br/>
			备注：<textarea name="remark" cols=“100” rows="10">你好!</textarea><br/>
			学院：<select name="dx" size="">
							<option value="01">北京大学</option>
							<option value="02">清华大学</option>
							<option value="03">汕头大学</option>
						</select>
		</form>
	</body>