【HTML】之表单

最新推荐文章于 2023-03-04 14:09:12 发布

Camina hacia ti

最新推荐文章于 2023-03-04 14:09:12 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/RuRu_Bai/article/details/115664206

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了HTML中的表单元素及其用途，包括单行文本框、密码输入框、单选按钮、多选按钮、提交和重置按钮、文件上传、隐藏域、图片提交按钮、下拉列表以及多行文本框。还展示了如何设置表单属性，并提供了包含各种表单元素的实际示例，例如性别选择、兴趣爱好复选框和时代少年团队员的下拉列表。此外，还讨论了GET和POST提交方式的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、表单作用

提交数据，使页面具有交互性。

2、表单标签

form双标签

<form action=””>内容</form>

表单之间不能相互嵌套，但是一个html可以有多个form，而且form里面可以包括表格。

<form action=”提交的地址” name=”表单名称” method=”提交方式”>
	<table>
		<tr>
			<td>
			</td>
		</tr>
	</table>
</form>

提交方式：get\post
get&post区别：
①get（默认）提交数据不安全，因为会在地址栏中显示；post不会；
②get提交数据大小由限制，不能大于2KB，而post目前没有限制；
如图：
这是GET用法
GET
这是POST用法
POST

3、表单元素

是行元素，得通过换行或者

1）单行文本框

用户名：<input type=”text” name=”常用的是userName”/>
密码：<input type=”password” name=”常用的是password”/>
第二个和第一个的区别是，第二个的输入会自动保护，类似密码登录

2）单选按钮

性别：

<input type=”radio” name=”sex”/>男
<input type=”radio” name=”sex”/>女

此时name必须有，而且像这种多选一的情况，这几个情况的name必须一致

3）多选按钮

<input type=”checkbox” />选项1
<input type=”checkbox” />选项2
<input type=”checkbox” />选项3

4）提交按钮

<input type=”submit” value=””/>

value的值用于修改按钮名称（默认提交）

5）重置按钮

<input type=”reset” value=””/>

value的值用于修改按钮名称（默认重置）

6）一般按钮

<input type=”button” value=””/>

button按钮没有任何功能，其内容通过value赋值
是提交功能；默认type=”submit”
重置是重置功能
没有功能的按钮是一般按钮

7）文件

当跟file有关的时候需要改编码格式：

<form action=”” name=”” enctype=”multipart/form-data”>

转换成二进制：0和1

<input type=”file” value=””/>

当type=”file”的时候，就可以选择文件

8）隐藏域

<input type=”hidden”/>

后台用的多，用户是看不见的

9）图片提交按钮

<input type=”image” src=”路径”/>

10）下拉列表

<select name=”列表名称”>
	<option value=”等同值1”>内容1</option>
	<option value=”等同值2”>内容2</option>
	<option value=”等同值3”>内容3</option>
	<option value=”等同值4”>内容4</option>
</select>

分组：
	<optgroup label=”组名”>
组员
	</optgroup>

<select name=”列表名称”>
	<optgroup>
		<option value=”等同值1”>内容1</option>
		<option value=”等同值2”>内容2</option>
	</optgroup>
	<optgroup>
		<option value=”等同值3”>内容3</option>
		<option value=”等同值4”>内容4</option>
	</optgroup>
</select>

11）多行文本框

<textarea name=”名称” cols=”列数” rows=”行数”>可以写内容</textarea>

默认情况下是可以缩放的。

12）与按钮相匹配

<input type=”radio” name=”sex” id=man”/><label for=”man”>男</label>
<input type=”radio” name=”sex” id=woman”/><label for=”woman”>女</label>

即当用户点击汉字的时候，也会自动选择对应的按钮；用以提升用户体验度。

4、表单元素的属性

1）type 属性
2）name 名称
3）Value 当前值
4）Checked 默认被选中，配合单选按钮和多选按钮使用
5）Selected 默认显示，配合option使用
6）Readonly 只读
7）Disable 禁用

练习：

<!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>欢迎来到我的小家！</title>
</head>

<body>
    <form action="" name="form1" method="POST" align="center">
        用户名：<input type="text" name="userName">
        </br>
        密码：<input type="password" name="password">
        </br>
        性别：<input type="radio" id="man" name="sex" checked><label for="man">男</label>
        <input type="radio" id="woman" name="sex"><label for="woman">女</label>
        </br>
        爱好：<input type="checkbox" id="sing" checked><label for="sing">唱歌</label>
        <input type="checkbox" id="play"><label for="play">看剧</label>
        <input type="checkbox" id="cp"><label for="cp">磕CP</label>
        </br>
        <input type="submit" value="登录">
        <input type="reset" value="取消">
        </br>
        <input type="file" name="" enctype="multipart/form-data">
        <p>时代少年团：<select name="时代少年团">
            <optgroup label="高考加油！">
                <option value="1">丁程鑫</option>
                <option value="2">马嘉祺</option>
                <option value="3">张真源</option>
            </optgroup>
            <optgroup label="高中生">
                <option value="4">宋亚轩</option>
                <option value="5">贺峻霖</option>
                <option value="6">严浩翔</option>
            </optgroup>

            <option value="7" selected>刘耀文</option>
        </select>
        </p>
    </form>

</body>

</html>

结果如图：