【HTML】之表单

最新推荐文章于 2022-09-25 19:37:01 发布

Camina hacia ti

最新推荐文章于 2022-09-25 19:37:01 发布

阅读量655

点赞数

分类专栏： HTML

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

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单

1、表单作用
2、表单标签
3、表单元素
4、表单元素的属性
练习：

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>

结果如图：

Camina hacia ti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【HTML】之表单

表单1、表单作用2、表单标签3、表单元素1）单行文本框2）单选按钮3）多选按钮4）提交按钮5）重置按钮6）一般按钮7）文件8）隐藏域9）图片提交按钮10）下拉列表11）多行文本框12）与按钮相匹配练习：1、表单作用提交数据，使页面具有交互性。2、表单标签form双标签<form action=””>内容</form>表单之间不能相互嵌套，但是一个html可以有多个form，而且form里面可以包括表格。<form action=”提交的地址” name=”表单名
复制链接

扫一扫

专栏目录