多选框

最新推荐文章于 2021-01-30 16:51:51 发布

原创最新推荐文章于 2021-01-30 16:51:51 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#WEB

HTML 专栏收录该内容

6 篇文章

订阅专栏

1、超链接

</body>
	<a href="https://cn.vuejs.org/v2/guide/installation.html"></a>
	<a href="https://cn.vuejs.org/v2/guide/installation.html">
	
	</a>
</body>

2、用户登录页面

	<title>用户登录页面</title>
	<style type="text/css">
		*{
			font-family: 微软雅黑；
		}
		
	</style>
</head>
</body>
	<h1>用户登录页面</h1>
	<form action="">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" value="小米">
		</p>
		<p>密码:</p>
		<p>
			<input type="password" name="password" value="123">
		</p>
		<p>邮箱:</p>
		<p>
			<input type="text" name="email" value="123@qq.com">
		</p>
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>
</body>

3、表单占位placeholder

<form action="">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" placeholder="用户名">
		</p>
		<p>密码:</p>
		<p>
			<input type="password" name="password" placeholder="密码">
		</p>
		<p>邮箱:</p>
		<p>
			<input type="text" name="email" placeholder="邮箱">
		</p>
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>

4、只读readonly

</body>
	<h1>用户登录页面</h1>
	<form action="">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" value="小胡" readonly>
		</p>
		
		<p>邮箱:</p>
		<p>
			<input type="text" name="email" placeholder="邮箱">
		</p>
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>
</body>

5、禁用disabled

</body>
	<h1>用户登录页面</h1>
	<form action="">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" value="小胡" disabled>
		</p>
		
		<p>邮箱:</p>
		<p>
			<input type="text" name="email" placeholder="邮箱">
		</p>
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>
</body>

6、文本框长度:size

<p>
			<input type="text" name="username" value="小胡" size="5">
		</p>

7、文本框最大长度:maxlength

	<p>
			<input type="text" name="username" value="小胡" maxlength="5">
		</p>

8、单选框:radio

</body>
	<h1>用户登录页面</h1>
	<form action="">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" value="小胡" maxlength="5">
		</p>
		<p>爱好：</p>
		<p>
			<label>
				<input type="radio" name="love" value="看书">看书
			</label>
		</p>
		<p>
			<label>
				<input type="radio" name="love" value="吃鸡">吃鸡
			</label>
		</p>
		<p>
			<label>
				<input type="radio" name="love" value="运动">运动
			</label>
		</p>		
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>
</body>

9、多选框checkbox

</body>
	<h1>用户登录页面</h1>
	<form action="index.php">
		<p>用户名:</p>
		<p>
			<input type="text" name="username" value="小胡" maxlength="5">
		</p>
		<p>爱好：</p>
		<p>
			<label>
				<input type="checkbox" name="love[]" value="看书">看书
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" name="love[]" value="吃鸡">吃鸡
			</label>
		</p>
		<p>
			<label>
				<input type="checkbox" name="love[]" value="运动">运动
			</label>
		</p>		
		<p>
			<input type="submit" value="OK">
			<input type="reset" value="cancel">
		</p>

	</form>
</body>