表单的属性

最新推荐文章于 2025-03-16 07:45:00 发布

LED邓

最新推荐文章于 2025-03-16 07:45:00 发布

阅读量180

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_74469640/article/details/132941527

版权

表单属性

1.multiple
multiple属性规定输入字段课选择多个值，如果使用该属性，则字段可选择多个值。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>required属性</title>
</head>
<body>
	<form action="#" method="get">
		<input type="file" multiple name="" id="" value="" />
	</form>
</body>
</html>

效果图：

在这里插入图片描述

2. placeholder
placeholder可以用来描述输入字段预期值的简短的提示信息，提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>required属性</title>
</head>
<body>
	<form action="#" method="get">
		<input type="" placeholder="用户名/手机号/邮箱" name="" id="" value="" />
	</form>
</body>
</html>

效果图：

在这里插入图片描述

3. required
required用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>required属性</title>
</head>
<body>
	<form action="#" method="get">
		请输入姓名：
		<input type="text" name="user_name" required="required" />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

效果图：
在这里插入图片描述

4. autofocus
autofocus设置之后在访问页面时，文字输入框会自动获得光标焦点，以便输入关键词。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="email" name="" id="" value="" autofocus />
    </body>
</html>

效果图：
在这里插入图片描述