表单属性相关知识

最新推荐文章于 2024-05-22 14:11:15 发布

要想胜利，脚踏实地，不去努力，哭天喊地

最新推荐文章于 2024-05-22 14:11:15 发布

阅读量91

点赞数

分类专栏： html 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/cxkjntmxzbh/article/details/127640908

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

value是默认值

placeholder是提示性文字

maxlength允许输入的最大字符数防止恶意注册

label标签的for属性值和表单的id属性值一样时可以让用户点击label标签时自动获得表单的焦点

required必填项

后台账号

旅游 <input type="checkbox" name="aihao" id="" value="lvyou" checked/>

上网 <input type="checkbox" name="aihao" id="" value="sw" />

出生年

</select>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">交友申请表</h1>
		<form action="qn.html" method="post" align="center">
			<!-- value是默认值
			placeholder是提示性文字
			 maxlength允许输入的最大字符数  防止恶意注册
			 label标签的for属性值和表单的id属性值一样时 可以让用户点击label标签时自动获得表单的焦点
			 required必填项
			 -->
			<p>
				<label for="userName">用户名</label>
				<input type="text" name="userName" id="userName" value="" placeholder="请输入用户名" maxlength="10" required/>
				<span>*比填项</span>
			</p>
			<p>
				<!-- readonly只读属性  只能看 不能修改 -->
				后台账号
				<input type="text" value="北城1号" readonly>
			</p>
			
			<p>
				<label for="pw">密码</label>
				<input type="password" name="pw" id="pw" value="" size="8"/>
			</p>
			<p>
				<label for="sex">男</label>
				<input type="radio" name="sex" id="sex" value="man" />
				<label for="sx">女</label>
				<!-- checked是默认选中 -->
				<input type="radio" name="sex" id="sx" value="woman" checked/>
			</p>
			<p>
				旅游 <input type="checkbox" name="aihao" id="" value="lvyou" checked/>
				上网 <input type="checkbox" name="aihao" id="" value="sw" />
			</p>
			<p>
				<!-- selected下拉栏的默认选中 -->
				出生 年
				<select name="year">
					<option value="1998">1998</option>
					<option value="1998">1999</option>
					<option value="1998" selected>2000</option>
				</select>
				
			</p>
			
			<input type="submit" value="提交按钮"/>
			<!-- disabled禁用属性 -->
			<input type="button" value="付款" disabled>
		</form>
	</body>
</html>