软件测试工程师之必备html知识，框架的设计之HTML表单设计

什么是表单：

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form> <input /></form> [1]

主要讲述以下几个部分

表单标记：<form></form> action 服务器地址，接受表单内容的地址 name 表单名称

method：提交方式 get和post方式，注意两个区别

注意：一般提交表单用的是post的，很少用get

注意：submit按钮，必须要放在form标签中，才有效，如果放在外面就是一个普通的button

重置按钮，不是清空的意思，是返回初始状态，也必须要放在form表单中去

第二：文本框和密码代码如下：

<form>

账号：<input type="text" name="userID" value="张三" /> <br />
密码：<input type="password" name="userpassword" /> <br /></form>

按钮，注意，submit按钮和rest按钮，必须要放在form里面，不然，submit按钮就只能相当于一个普通按钮了

单选框和复选框：单选框name的名称要保持一致，初始化选中checked="checked"

性别：<input type=" radio" value="男" name="sex" checked="checked"/>男

<input type="radio" value="男" name="sex"/>女

<input type="radio" value="男" name="sex"/>保密

<br />

兴趣爱好：<input type=" checkbox" name="xq" value="LOL" checked="checked"/>LOL

<input type="checkbox" name="xq" value="DOTA"/>DOTA

<input type="checkbox" name="xq" value="看小说"/>看小说

<br />

都可以使用checked属性来设置默认选中项

隐藏域：<input type="hidden" name="userNUber" value="10001" />，hidden隐藏表单，页面上不会显示，但是在查看源代码或者提交表单在url里面可以看到

多行文本域：textarea：多行文本框，一般最常用的是设置宽度或者高度

下拉列表域：select 标记和option选项

学院：<select name="dx" size="3">
<option value="01">北京大学</option>
<option value="02">清华大学</option>
<option value="03">哈佛大学</option>
<option value="03">天津大学</option>
<option value="03">上海大学</option>
<option value="03">南京大学</option>

</select><br />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get" enctype="application/x-www-form-urlencoded">
			<input type="hidden" name="userNUber" value="10001" />
			账号：<input type="text" name="userID" value="张三" /> <br />
			密码：<input type="password" name="userpassword" /> <br />
			<input type="submit" value="登陆" />
			<input type="reset" value="重置"/><br />
			<br />
			头像：<input type="file" /><br />
			性别：<input type="radio" value="男" name="sex" checked="checked"/>男
			<input type="radio" value="男" name="sex"/>女
			<input type="radio" value="男" name="sex"/>保密
			<br />
			兴趣爱好：<input type="checkbox" name="xq" value="LOL" checked="checked"/>LOL
			<input type="checkbox" name="xq" value="DOTA"/>DOTA
			<input type="checkbox" name="xq" value="看小说"/>看小说
			<br />
			学院：<select  name="dx" size="3">
				<option value="01">北京大学</option>
				<option value="02">清华大学</option>
				<option value="04">哈佛大学</option>
				<option value="05">天津大学</option>
				<option value="06">上海大学</option>
				<option value="07">南京大学</option>
			</select><br />
            <br />
            备注：<br /><textarea cols="50" rows="10">
     
            </textarea>
		</form>
	</body>
</html>

执行结果如下：

以上就是表单的描述，注意，表单很重要，使用很多

软件测试工程师之必备html知识，框架的设计之HTML表单设计

猜你喜欢