零基础学习HTML(15)——button标签（下）

最新推荐文章于 2024-05-17 02:15:14 发布

Dragon水魅

最新推荐文章于 2024-05-17 02:15:14 发布

阅读量347

点赞数

分类专栏：零基础学习Web开发文章标签： html php

本文链接：https://blog.csdn.net/qq_43650934/article/details/108586313

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

浏览器通常可以自动保存一些用户数据，例如姓名、邮箱，避免用户频繁输入：
在这里插入图片描述
但我们可以通过在form标签中设置autocomplete属性来进行关闭：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<!-- 拒绝浏览器自动填充表单 -->
	<form action="welcome.php" method="post" autocomplete="off">
		名字：<input type="text" name="name"><br><br>
		邮箱：<input type="text" name="email"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
同时可以在input标签中设置autocomplete属性，避免所有input标签统一操作：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" autocomplete="on"><br><br>
		名字：<input type="text" name="name"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
可以通过 form 标签中的 target 属性实现跳转新页面：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form target="_blank" action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" autocomplete="on"><br><br>
		名字：<input type="text" name="name"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
可以通过 form 标签的 value 属性实现默认值：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form target="_blank" action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" value="女" autocomplete="on"><br><br>
		名字：<input type="text" name="name"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
可以通过 form 标签的 autofocus 属性实现光标自动移动到对应的 input ：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form target="_blank" action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" value="女" autocomplete="on"><br><br>
		名字：<input type="text" name="name" autofocus><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
可以在 button 标签中使用 disabled 属性禁用按钮，同样，在 input 标签中也可以禁用输入框：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form target="_blank" action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" value="女" disabled><br><br>
		名字：<input type="text" name="name" autofocus><br><br>
		<button type="submit" disabled>提交</button>
	</form>
</body>
</html>

在这里插入图片描述
可以在 input 标签中使用 readonly 来实现禁止修改：

<!DOCTYPE html>
<html>
<head>
    <title>第十六节课</title>
    <meta charset="utf-8">
	<title>调查问卷</title>
</head>
<body>
	<h1>富人妇科医院调查问卷</h1>
	<form target="_blank" action="welcome.php" method="post" autocomplete="off">
		性别：<input type="text" name="sex" value="女" readonly><br><br>
		名字：<input type="text" name="name" autofocus><br><br>
		<button type="submit" disabled>提交</button>
	</form>
</body>
</html>