Web学习笔记9：html进阶篇-高级标签（4）——from表单

「已注销」

已于 2022-06-02 14:50:20 修改

阅读量563

点赞数 2

分类专栏： Web学习笔记文章标签：前端 javascript 开发语言

于 2022-03-17 19:08:16 首次发布

本文链接：https://blog.csdn.net/wanghs0716/article/details/123557386

版权

Web学习笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

"本文详细介绍了如何使用HTML表单中的创建调查问卷的单选选项，并强调了为确保单选功能设置name属性的重要性。通过实例演示，读者将学会如何在网页上实现类似问卷的功能。"

摘要由CSDN通过智能技术生成

前言

大家是否做过调查问卷？我们来看一个例子：

用箭头所示的就是选项。我们都知道，问卷的这个选项是可以点击的。那么，我们应该怎么做出来这个效果呢？

或许有人就说：“用js呗！”

js是可以做出来这个效果（js是负责动态的），但是太麻烦了！我们有现成的东西，正等待我们使用！他就是form表单。

form表单——案例初步

form表单能够发送数据。和大部分的标签一样，它也是一个标签，用<form></form>来表示。

同样，我们先来看一个案例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<div>请在以下选项中，选择最帅气的一个人：</div>
	<form>
		1.作者<input type="radio">
		<br>
		2.作者<input type="radio">
		<br>
		3.作者<input type="radio">
	</form>
</body>
</html>

~~先对本题进行一个点评：选项都非常的真实！~~

我们可以发现，运行结果中，在“作者”两个字后头，出现了三个小圆圈。这三个圆圈就是单选的地方。点击圆圈，圆圈变蓝。

正式讲解——form表单

首先，先看一下form表单的结构：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<form>
		<!--内容-->
	</form>
</body>
</html>

我们的“内容”部分，就是我们的主要讲解内容。

form表单中最重要的就是input函数。input函数就做出了我们的单选框效果。

我们来看一下input函数可以做些什么：

text 文本输入框

password 密码输入框

submit 提交按钮

radio 单选框

checkbox 复选框（多选框）

大家可以一个一个试一试。这里就讲解text、submit和radio，其他的自己是试一试。

1.text

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<form>
		请输入你的名字：<input type="text">
	</form>
</body>
</html>

这是一个结构最简单的程序。运行出来的，就是一个文本输入框。在这里，我们可以输入文本。

input函数在这里需要的几个特殊的量：type、name。type，就是他的样式，包含之前的什么文本输入框、单选框等等。name，就可以当做一个东西的名字。我们举个栗子：什么东西都需要名字，那么这个name就定义给了这个东西（type指的东西）一个名字。

2.submit

这是一个提交按钮。执行这段程序，就会生成一个“提交”按钮。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<form>
		<input type="submit">
	</form>
</body>
</html>

这里的input也有几个属性：同之前的type、name，还有value。你在value中写的东西，就是提交按钮上的文字。例如现在，value就是默认的“提交”两个字。当我把value改成login时，就变成了“login”了。

3.radio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<form>
		<input type="radio">
	</form>
</body>
</html>

单选框。这个东西就是我们平常调查问卷里做的选项。

这里的input需要：type、name。name函数在这里极其重要。当我们不给他定义一个name的时候，系统不会默认这些单选框是一组的，会把他们看成许多不同的单选框。所以，就不会起到单选的作用，而变成了多选。（没听明白的可以试一试）

这个时候，就需要我们定义一个name了。只要所有的同一题的name相同，就可以了。

我爱挑错

那么，我们前言中的程序有一个错误，大家发现了吗？

程序的单选框没有定义名字。这就是致命伤。你能改一下吗？

答案：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>form表单</title>
</head>
<body>
	<div>请在以下选项中，选择最帅气的一个人：</div>
	<form>
		1.作者<input type="radio" name="handsome_people">
		<br>
		2.作者<input type="radio" name="handsome_people">
		<br>
		3.作者<input type="radio" name="handsome_people">
		<br>
	</form>
</body>
</html>

今天的学习之旅就结束了，再见！

「已注销」

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web学习笔记9：html进阶篇-高级标签（4）——from表单

前言大家是否做过调查问卷？我们来看一个例子：用箭头所示的就是选项。我们都知道，问卷的这个选项是可以点击的。那么，我们应该怎么做出来这个效果呢？或许有人就说：“用js呗！”js是可以做出来这个效果（js是负责动态的），但是太麻烦了！我们有现成的东西，正等待我们使用！他就是form表单。form表单——案例初步form表单能够发送数据。和大部分的标签一样，它也是一个标签，用<form></form>来表示。同样，我们先来看一个案例：<!
复制链接

扫一扫

专栏目录