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

Posted 萌杰尔

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>

显示结果如下

如上图可知,当type属性为file时,会生成一个如上图所示的选择文件按钮

这个就是这篇文章讲到的所有内容了,表单元素还有很多很多,本篇文章只讲了最常用的集中,希望大家能在看完本篇文章对表单元素有个基本的理解,推荐大家可以用VSCode尝试着写一下代码,顺便看一下其他的表单元素都是长什么样子的

HTML的逻辑性没那么强,主要还是"放置"代码,大家尽情的玩吧✧(≖ ◡ ≖✿)

欢迎各位小伙伴加入我的微信群

以上是关于HTML详解-3 表单元素 张三可男可女的主要内容,如果未能解决你的问题,请参考以下文章

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

html表单元素及表单元素详解

3 表单详解

HTML5 新表单元素使用详解

Object重识

Java找工作必备知识——day05事务详解(小王,小刘情景在线解释事务的属性)