HTML5 ------ 表单

红的花绿的叶

已于 2024-07-16 10:13:04 修改

阅读量39

点赞数

分类专栏：前端基础文章标签： html5 前端 html

于 2022-12-15 13:46:40 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128328707

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

表单标签 ----- <from>

作用：用于收集用户的信息

Action ------ 表示表单的提交位置

Method ------ 提交方式 ------ 默认属性：get

例如：

file:///D:/code/first.html？

file:///D:/code/first.html?username=zhangsan&pwd=123456

解释：

？之前表示的就是页面提交路径的url

？后面就是属性，属性和属性之间的连接就使用&

输入 ------ <input>

Type 属性：

text --- 文本框

password --- 密码框

submit --- 提交按钮

reset --- 重置

空格的表示方法： 

HTTP协议：

共计9种，这里只讲两种，分别是 get 和 post

get 和 post 两种请求的区别：

get请求，会把用户的信息暴露在地址栏上，会导致信息泄露，用户使用不安全，不同的浏览器对地址栏的长度不同，IE浏览器为2048个字节

post请求，不会把用户的信息暴露在地址栏，相比于get请求更加安全，在长度上没有限定

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body bgcolor="#ccc">
<div align="center">
     <h1>创意工坊</h1>
     <hr>
	<form action="first.html" method="post">
		<p>用户名:<input type="text" name="username" /></p>
        <p>密&nbsp;&nbsp;码:<input type="password" name="pwd" /></p>
        <p>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        </p>

	</form>
</div>
</body>
</html>

单选框 ------ Type = radio

Text 和 password value 的属性相当于文本框和密码框的值

submit reset button ----- value 按钮的名称

select ----- 选择框

option ----- 表示选项

textarea ----- 文本域