HTML详解-3 表单元素张三可男可女

Posted 2022-11-27 萌杰尔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML详解-3 表单元素张三可男可女相关的知识，希望对你有一定的参考价值。

网站开发基础之html详解-3 表单元素

注: 元素即标签

在上一节，我们讲了一些比较基础、比较简单的元素(标签)，比如段落元素(标签)( p )，或者超链接元素(标签)( a )，今天我们来讲一些特殊的标签

这个特殊的标签叫做表单元素，什么是表单元素呢？相信大家都对考试感到苦恼，不妨看一看试卷，有单选，有多选，有问答，表单元素就是诸如多选、单选之类的元素

input标签

input标签用于生成表单元素

<input type="text">

该标签存在type属性，用于生成不同的表单元素

文本输入框

type属性为text时生成一个文本输入框

<input type="text">

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
</body>
</html>

显示结果如下

input标签中，当type属性为text时，可以使用placeholder属性，该属性为输入框为空时提供了提示信息

<input type="text" placeholder="请输入你的年龄">

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入你的年龄">
</body>
</html>

显示结果如下

可以看到输入框的提示信息为请输入你的年龄

密码输入框

type属性为password时生成一个密码输入框

<input type="password">

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="password" name="" id="">
</body>
</html>

显示结果如下

大家可能觉得这个和text一样，别着急，试着网输入框中输入一些信息

嘿嘿嘿，看到了吧，输入的信息变成一个个的小圆圈

是不是都在猜我输入了什么(=・ω・=)

注意：密码输入框也支持placeholder属性，所有的输入框都支持，为了避免内容重复，我就不过多写了，可以看文本输入框那里关于placeholder的讲解

单选框

type属性为radio时生成一个单选框

<input type="radio">

单选框，emmmmm，既然是选项，就不可能只有一个，那如果有多个单选框，怎么才能知道那些对应为一组(同一个问题的回答选项)呢？

答案当然是给他们取一个组名了，这样只要这个名字相同他们就是同一组

通常情况下，我们会通过name属性填写相同的值表示这些单选框/多选框为一组

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小王是男的女的?<br>
    A. 男的<input type="radio" name="sexOfWang">
    B. 女的<input type="radio" name="sexOfWang">
</body>
</html>

上文代码中，两个单选框的name属性皆为sexOfWang，也就是说这两个都是对应"小王是男的女的"这个问题的回答选项

选择试试

当你们尝试之后就会发现，无论怎么选择，都只有一个可以被选择上，因为他们是同一个问题的回答，如果没有设置name属性为相同的值，他们就会各自为政，全部都能被选择上

多选

type属性为checkbox是生成一个多选框

多选的用法与单选很相似

<input type="checkbox">

同样的，多选框也不可能只有一个，为了具体分开，肯定也要给其分组，与单选框一样，通过给其同样的那么属性为其分组

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    张三是男的女的?<br>
    A. 男的<input type="checkbox" name="sexOfWang">
    B. 女的<input type="checkbox" name="sexOfWang">
</body>
</html>

显示结果如下

此时我们可以选择看一看

嘿嘿嘿，薛定谔的性别，张三可男可女 (^・ω・ )

这就是多选框了

按钮

type为button时，生成一个按钮

<input type="button">

一般情况下我们需要让按钮有显示的文本，所以需要给这个标签加上value属性

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点击我">
</body>
</html>

显示结果如下

根据代码可以得知我为该元素赋予了值为"点击我"的value属性，根据图可得，该属性会显示于按钮上

选择文件

type为file时，用于生成一个选择文件的按钮

<input type="file">

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file">
</body>
</html>