form表单(h5)

最新推荐文章于 2019-09-17 14:29:26 发布

daisy_oo

最新推荐文章于 2019-09-17 14:29:26 发布

阅读量565

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_27597973/article/details/50718189

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

form表单的一些用法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单测试</title>
	</head>

	<body>
		<form id="testform">
			<input type="text">
		</form>
		<textarea form="testform" rows="5px" cols="30px"></textarea>

		<form id="testform1">
			<input type="submit" name="s1" value="v1" formaction="xx.jsp" />提交到xx.jsp的页面
			<input type="submit" name="s2" value="v2" formaction="xx.jsp" />提交到xx.jsp的页面
			<input type="submit" name="s3" value="v3" formaction="xx.jsp" />提交到xx.jsp的页面
		</form>

		<form>
			<input type="text" formenctype="text/plain" />
			<input type="text" formenctype="multipart/form-data" />
			<input type="text" formenctype="application/x-www-form-urlencoded">
		</form>

		<form action="">
			<input type="text" required="required" />
			<button type="submit">提交</button>
		</form>

		<form id="testform2">
			<label id="label" for="txt_name">姓名：</label>
			<input id="txt_name" />
			<input type="button" id="btnValidate" value="验证" οnclick="Validate()" />
		</form>

		<form>
			<label id="label1">
				邮编：
				<input id="txt_zip" maxlength="6" />
				<small>请输入六位数字</small>
			</label>
			<input type="button" value="设置默认值" οnclick="setValue()" />
		</form>

		<input type="text" placeholder="请输入用户名" />

		<form>
			<input type="text" name="greeting" list="greeting" autocomplete="on" />
			<datalist id="greeting" style="display: none;">
				<option value="HTML5学习">HTML5学习</option>
				<option value="Android学习">Android学习</option>
				<option value="ios学习">ios学习</option>
			</datalist>
		</form>

		<form>
			请输入内容
			<input pattern="[A-Z]{3}" name="part" />
			<input type="submit" />
		</form>

		<form>
			<input type="test" name="text" />
			<input type="button" value="点击我" οnclick="AD()" />
		</form>

		<input type="checkbox" indeterminate id="cb" />属性测试
		
		<form action="">
			姓名：<input type="text" name="name" />
			<input type="image" src="img/icon.png" alt="编辑" width="20" height="20"/>
		</form>
		
		
		<script>
			function Validate() {
				var txtName = document.getElementById("txt_name");
				var btn = document.getElementById("btnValidate");
				var form = document.getElementById("testform2");
				if (txtName.value.trim() == "") {
					var label = document.createElement("label");
					label.setAttribute("for", "txt_name");
					form.insertBefore(label, btn);
					txtName.labels[1].innerHTML = "请输入姓名";
					txtName.labels[1].setAttribute("style", "font-size: 9px;color:red");
				}
			}

			function setValue() {
				var label = document.getElementById("label1");
				var textbox = label.control;
				textbox.value = "010010";
			}

			function AD() {
				var control = document.forms[8]['text'];
				var Direction = control.selectionDirection;
				alert(Direction);
			}
			var cb = document.getElementById("cb");
			cb.indeterminate = true;
		</script>
	</body>

</html>