前言
大家是否做过调查问卷?我们来看一个例子:
用箭头所示的就是选项。我们都知道,问卷的这个选项是可以点击的。那么,我们应该怎么做出来这个效果呢?
或许有人就说:“用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>
今天的学习之旅就结束了,再见!