form表单总结

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

小姚要加油！

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

阅读量242

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_74430033/article/details/130475075

版权

本文详细介绍了HTML中form标签的属性，如action、method和name，以及input标签的各种类型，包括text、password、radio等，并提到了相关属性，如readonly、disabled。还讨论了表单元素的安全性，如GET与POST提交方式的区别。此外，文章还涵盖了select、textarea、a标签、img标签以及audio和video标签的使用和属性。

摘要由CSDN通过智能技术生成

form标签的属性

1.action--跳转路径

注：路径分为绝对路径（从盘符开始，找到你所需要的文件路径路径+文件名称）和相对路径（当前源文件和目标文件的相对位置）

2.method--用来明确表单提交方式（get,post）默认值是get

注：get会把用户信息暴露在在地址栏上，而post不会，所以post 比get更安全。

3.name--表单的名称

表单元素（文本框，密码框，下拉列表框等）

input标签

语法格式如下：

<input type="元素的类型" name="元素的名称" value="元素的值"

type的取值

text--文本 password--密码框 radio--单选按钮 checkbox--多选按钮 submit--提交按钮 reset--复位按钮 button--普通按钮 image--图像按钮 file--文本域（上传文件的按钮）hidden--隐藏域 email--邮箱 color--颜色域 date--日期 time--时间 datetime-local --日期+时间 range--进度条

input属性

checkbed---默认选择

readonly---只读文段，只能读不可改

disabled---表示禁用不能点击

autofocus---默认光标的位置

required---不能为空白提交

实例如下：

<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="">
用户名：<input type="text" name="username" value="zhangsan" readonly><br>
用户名：<input type="text" name="username" value="lisi" disabled><br>
密码框：<input type="password" name="password" autofocus required><br>
请选择你的性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女
<p>
选择您的爱好：
<input type="checkbox" name="aihao" >唱歌
<input type="checkbox" name="aihao" >跳舞
<input type="checkbox" name="aihao" >rap
<input type="checkbox" name="aihao" >打篮球
</p>
<input type="submit">
<input type="reset">
<input type="button" value="普通">
<input type="image" src="图片1.png">
<input type="file">
<input type="hidden" value="123456"><br>
请填写自己的邮箱：<input type="email" name="email" value="请填写邮箱">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="range">
</form>
</body>
</html>

select标签

下拉列表框一般与option标签一起用

selected属性为默认选中的选择

multiple=“multiple”属性为以列表形式显示

实例如下：

<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="">
请选择您家庭的地址：
<select name="" id="" multiple="multiple">
<option value="">海南</option>
<option value="">山西</option>
<option value="" selected>重庆</option>
<option value="">上海</option>
</select>
</form>
</body>
</html

textarea 标签

用来实现文本域

cols="n" --------- n 列，表示文本域的宽度

rows="x"-------- x 行，表示文本域的高度

a标签

是超文本超链接标签用来进行页面的跳转 href =“路径”和action 类似

格式：

<a href="https://www.baidu.com/">点我</a>

vlink ------访问过的超文本链接的颜色 Alink ------激活超文本链接的颜色 link ------ 超链接文本的颜色 text ------ 文本的颜色 bgcolor ----- 背景颜色

注：颜色表示法：英文单词 red green 、#rrggbb 、rgba() a表示透明度

img标签

用来插入图片（gif、jpg、png、bmp）

src 属性 ------- 指的是图片的路径（绝对路径和相对路径）

alt 属性 -------- 代替图片的文本内容（路径错误或者因为浏览器的原因图片显示不出来的时候，用

一段或者一个词描述一下这个图片）

width ------ 宽度

height------- 高度单位是 px( 像素 ) %

border ----- 边框默认值是 0

align ------ 位置（图片和文字的位置）

align取值： top ------ 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认值） right ---------- 右对齐 left -----------左对齐

title（图片标题）用来显示描述图片

多媒体标签

audio 标签 ------ 音频

video 标签 ------ 视频

autoplay="autoplay"----- 自动播放（浏览器要支持 H5 标准才能使用这个属性）

controls="controls" ----- 表示播放器的组件

总结完啦！！！耶耶耶！！！

小姚要加油！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
form表单总结

1.--跳转路径注：路径分为（从盘符开始，找到你所需要的文件路径路径+文件名称）和（当前源文件和目标文件的相对位置）2--用来明确表单提交方式（get,post）默认值是get注：get会把用户信息暴露在在地址栏上，而post不会，所以post 比get更安全。3--表单的名称。
复制链接

扫一扫