Html读书随记5-表单之单选框

最新推荐文章于 2024-05-08 02:02:02 发布

无关风月.

最新推荐文章于 2024-05-08 02:02:02 发布

阅读量5.4k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_49399033/article/details/118919167

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

表单

表单简介

在前面的章节中，我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面，动态页面是没办法实现的。如果想要做出一个动态页面，我们就需要借助表单来实现。

其中，文本框、按钮、下拉菜单等就是常见的表单元素。

表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

表单标签

在HTML中，表单标签有5种：form、input、textarea、select和option。

根据外观进行划分，表单可以分为以下8种。单行文本框。密码文本框。单选框。复选框。按钮。文件上传。多行文本框。下拉列表。

form标签

在HTML中，我们知道表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，与创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。

基本语法
<form>
	各种表单标签
</form>

form标签属性

在HTML中，form标签的常用属性如表

在这里插入图片描述

这里的属性都比较抽象，我们简单看一下就行，等学了php等后端技术自然就能真正地理解了。

name属性

在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单命名。

exp：
<form name="myForm"></form>

method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。

exp:
<form method="post"></form>

action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

exp：
<form action="index.php"></form>

target属性

form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

exp:
<form target="_blank"></form>

enctype属性

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

input标签

在HTML中，大多数表单都是使用input标签来实现的。

语法：
<input type="表单类型"/>
<!--------------input是自闭合标签，它是没有结束符号的。----------------->

其属性取值如下表
在这里插入图片描述

text属性（单行文本框)

简介：

在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于网站的注册登录功能中。

基本语法：
<input type="text"/>

exp:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <form method="post">
             姓名:<input type="text"/>
        </form>
    </body>
</html>

其效果如图
在这里插入图片描述

单行文本框属性

在HTML中，单行文本框常用属性如表

在这里插入图片描述

对于元素属性的定义，是没有先后顺序的，你可以将value定义在前面，也可以定义在后面。

value属性：

value属性用于设置单行文本框中默认的文本，如果没有设置，文本框就是空白的。

exp:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <form method="post">
             姓名:<input type="text"/><br/>
             姓名:<input type="text" value="helicopter"/>
        </form>
    </body>
</html>

效果如图：
在这里插入图片描述

size属性：

size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。

exp:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <form method="post">
             姓名:<input type="text" size="20"/><br/>
             姓名:<input type="text" size="10"/>
        </form>
    </body>
</html>

效果如图：
在这里插入图片描述

maxlength属性：

当我们输入内容后，会发现设置maxlength="5"的单行文本框最多只能输入5个字符

exp:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <form method="post">
             姓名:<input type="text" />
             姓名:<input type="text" maxlength="5"/>
        </form>
    </body>
</html>

效果如图：
在这里插入图片描述

密码文本框

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（如value、size、maxlength等）。不过它们有着本质上的区别：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

在这里插入图片描述

基本语法：
<input type="password"/>

密码文本框属性

密码文本框可以看成是一种特殊的单行文本框，它拥有和单行文本框一样的属性，如表

在这里插入图片描述

exp:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" size="15" maxlength="10" /><br />
        密码：<input type="password" size="15" maxlength="10" />
    </form>
</body>
</html>

效果如图:
在这里插入图片描述

密码文本框只能使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。

单选框

在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”

基本语法:
<input type="radio" name="组名" value="取值"/>

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

exp:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

效果如图
在这里插入图片描述

对于这一组单选按钮，只能选中其中一项，而不能同时选中两项。这就是所谓的“单选框”。

Q:如果想要在默认情况下，让第一个单选框选中，该怎么做呢？

A:可以使用checked属性来实现

exp:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" checked />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

效果如图
在这里插入图片描述

特别的：要注意单选框的name属性

如果不加name属性，会发生什么呢？

如果没有加上name属性，预览效果好像没有变化。

但是当我们选中框内内容时，会发现可以同时选中两个内容。

还有一个容易犯得错误是：

如果name属性的取值不同，会发生什么呢？

在本例中，其效果与未加name标签相同。

因此在实际开发中，对于同一组的单选框，必须要设置一个相同的name，这样才会把这些选项归为同一个组。

单选框引例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post">
			性别:
			<input type="radio" name="gender" value="男" />男
			<input type="radio" name="gender" value="女" />女<br/>
			年龄:
			<input type="radio" name="age" value="80后" />80后
			<input type="radio" name="age" value="90后" />90后
			<input type="radio" name="age" value="00后" />00后
		</form>
	</body>
</html>

效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlgbyMLD-1626713467461)(image-20210720004708100.png)]

这里定义了两组单选框，在每一组中，选项之间都是互斥的。也就是说，在同一组中，只能选中其中一项。

最后有一点要说明一下，为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

	<label><input type="radio" name="gender" value="男" />男</label>
	<label><input type="radio" name="gender" value="女" />女</laber>
为了减轻初学者的负担，对于这种规范写法，暂时不用考虑。

无关风月.

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Html读书随记5-表单之单选框

表单表单简介在前面的章节中，我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面，动态页面是没办法实现的。如果想要做出一个动态页面，我们就需要借助表单来实现。其中，文本框、按钮、下拉菜单等就是常见的表单元素。表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。表单标签在HTML中，表单标签有5种：form、input、textarea、select和option。根据外观进行划分，表单可以分为以下8种。单行文本框。密码
复制链接

扫一扫