HTML的form表单

最新推荐文章于 2024-05-04 15:43:14 发布

无忧

最新推荐文章于 2024-05-04 15:43:14 发布

阅读量2.3k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/2303_76599423/article/details/130648941

版权

1.get请求

form表单中get为默认的提交方式，当使用get方式提交表单时，浏览器会将表单中的数据添加到地址后面，作为地址参数。

<!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>
<form action="" method="get">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p><input type="submit">提交</p>
</form>
</body>
</html>

2.post请求

form表单中ppst相较于get而言安全性更高在使用post方式提交表单时，表单中的数据将会被隐藏。

<!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>
<form action="" method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p><input type="submit">提交</p>
 
</form>
</body>
</html>

3.action

form表单中action为跳转标签，后接跳转路径

<!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="跳转路径" method="post" name="password">
用户名：<input type="text" name="uesername">
密码： <input type="password" name="password">
<input type="submit">
</form>
</body>
</html>

4.input属性

1 input：输入框
1.1 type：类型默认为text
1.1.1 text：文本类型
1.1.2 password：密码类型
1.1.3 checkbox：复选框（多选）
1.1.4 radio：单选（有默认值）
1.1.5 submit：提交
1.1.6 reset：重置
1.1.7 file：文件
1.1.8 hidden：隐藏
1.1.9 image：图片
1.2.0 button：按钮
1.2 name：指定该input元素的名称，也可以指定其他元素
1.3 value：元素的初始值，type为radio时必须指定一个值
1.4 size：指定表单元素的初始宽度
当type=text、password时，表单元素的大小以字符为单位
其他类型时，以像素为单位
1.5 maxlength：type=text、password时输入的最大字符数
1.6 checked：type=radio、checkbox，指定按钮是否被选中
1.7 placeholder：文本框中的隐性提示（灰色字体的提示）
1.8 required：规定文本框内容不能为空

5.select的属性

select为下拉列表框

selected 属性 ------ 默认被选中的选项

multiple="multiple" 属性 ------- 以列表形式显示

<!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>
<p>你的家庭住址:省份:
    <select name="province" id="" multiple="multiple">
    <option value="">兰州</option>
    <option value="">西安</option>
    <option value="">拉萨</option>
    <option value="selected" >重庆</option> 
</select>
</p>
</body>
</html>

6.textarea标签

用来实现文本域

cols="数字" --------- 多少列，表示文本域的宽度

rows="数字"-------- 多少行，表示文本域的高度

<!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>
<textarea name="" id="" cols="30" rows="10">
这个家伙很懒什么也没留下
</textarea>
</form>
</body>
</html>

无忧

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML的form表单

form表单中get为默认的提交方式，当使用get方式提交表单时，浏览器会将表单中的数据添加到地址后面，作为地址参数。form表单中ppst相较于get而言安全性更高在使用post方式提交表单时，表单中的数据将会被隐藏。1.3 value：元素的初始值，type为radio时必须指定一个值。当type=text、password时，表单元素的大小以字符为单位。cols="数字" --------- 多少列，表示文本域的宽度。1.4 size：指定表单元素的初始宽度。rows="数字"--------
复制链接

扫一扫