一、input 元素实现 radio 单选框
单选框在实际开发中应用非常广泛,比如在选择页面的模式的时候,只能选择一种,如下图所示:
input 元素可以实现单选框的效果,结合 lable 元素,只需要将 type 设置为 radio 就表示为单选框,但是同时需要设置单选框的文本,文本内容直接写在 input 元素的后面即可;还需要设置 name 属性,因为只有 name 值相同才具备单选的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="male">
<input id="male" type="radio" name="sex" value="male">男
</label>
<label for="female">
<input id="female" type="radio" name="sex" value="female">女
</label>
</body>
</html>
使用浏览器打开 HTML 页面,具体效果如下:
可以看到已经出现单选的样式,我们可以使用 form 元素来包裹这两个单选框,同时增加添加提交按钮,向后端地址发送数据,比如 http://www.xxx/s?age=188&set=male; 具体 HTML 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--action 表示要发送的后端的 URI 地址-->
<form action="/abc">
<label for="male">
<input type="radio" id="male" name="sex" value="male">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="female">女
</label>
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮">
</form>
</body>
</html>
通过 VSCode 的插件 Live Server 打开 HTML 页面,效果如下:
可以看到该页面是有具体的服务器地址的,因此我们可以点击任意一个提交按钮,向后端提交数据:
点击按钮,页面会发生跳转,可以从地址栏中看到我们向后端发送的数据内容,可以看到 value 属性的值就是我们向服务器发送的数据。
二、input 元素实现 checkbox 多选框
多选框在 Web 开发中也是非常常用,比如注册页面或者个人信息设置页面等常会用到。
input 元素也可以通过设置 type 属性值为 checkbox
来实现多选框,除了 type 属性外,多选框也需要设置 name 属性,对于同一类型的 checkbox,name 属性要保持一致。
创建 HTML 页面实现多选框,使用 form 元素实现表单,具体 HTML 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/abc">
<div>
爱好:
<label for="basketball">
<input type="checkbox" id="basketball" name="hobby"> 足球
</label>
<label for="football">
<input type="checkbox" id="football" name="hobby"> 篮球
</label>
<label for="reading">
<input type="checkbox" id="reading" name="hobby"> 阅读
</label>
</div>
<input type="submit" value="提交按钮">
</form>
</body>
</html>
使用 VSCode 的 LiverServer 插件打开 HTML 页面,效果如下:
点击提交按钮,向服务器提交数据:
可以从浏览器地址栏看到数据并没有提交成功,这是因为选项中没有设置 value 属性,接下来给每个选项设置 value 属性,value 属性就表示当前选项,具体代码如下:
<form action="/abc">
<div>
爱好:
<label for="basketball">
<input type="checkbox" id="basketball" name="hobby" value="football"> 足球
</label>
<label for="football">
<input type="checkbox" id="football" name="hobby" value="basketball"> 篮球
</label>
<label for="reading">
<input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
</label>
</div>
<input type="submit" value="提交按钮">
</form>
通过 LiverServer 打开 HTML 页面,再次点击提交按钮:
可以看到数据已经成功发送。
三、textarea 多行文本输入框
input 是单行输入框,用户可以输入一行文本,通常用户获取用户名等简单信息,而对于评论或者是博客这种多行文本我们就需要使用到 textarea
元素来实现。
textarea
元素包含了两个属性,分别是 cols
用于设置文本输入框的列数,以及 rows
用来设置文本输入框的行数。
创建 HTML 页面,使用 textarea 元素实现多行文本框,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/abc">
<label for="info">
个人介绍:
<textarea name="info" id="info" cols="30" rows="10"></textarea>
</label>
</form>
</body>
</html>
通过 LiverServer 打开 HTML 页面,效果如下:
textarea
元素实现的多行输入框还支持通过鼠标进行缩放,关于缩放的 CSS 设置有以下几个,分别是:
- 禁止缩放:
resize:none
- 水平缩放:
resize:horizontal
- 垂直缩放:
resize:vertical
- 水平垂直缩放:
resize:both
给上面的 HTML 代码添加 CSS,设置缩放规则
textarea {
resize: none;
}
使用 LiveServer 打开,使用鼠标进行缩放,效果如下: