快速了解HTML表单

最新推荐文章于 2024-07-08 16:01:05 发布

一枚xzaza

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量87

点赞数 1

文章标签： html java Powered by 金山文档

本文链接：https://blog.csdn.net/2201_75364836/article/details/129679019

版权

form：描述一个表单
action：设置要提交的资源的地址
method：设置提交表单的方式，method="get|post" 默认设置的是get

1、常见的表单项标签：
<input type="text">：描述一个单行文本框
<input type="password">：描述一个密码框

<input type="radio">：描述一个单选框
注意：表示同一功能的单选框必须设置相同的name，否则可以选择多个

<input type="checkbox">：描述一个复选框
<input type="file">：描述一个文件域

<select>：描述一个下拉列表框
    <option></option>：描述下拉框中的选项
</select>

<textarea></textarea>：描述一个多行文本框（文本域）

<input type="reset">：描述一个重置按钮，可以将表单中的数据恢复到默认状态，按钮上默认展示"重置"，可以通过value属性设置其上展示的内容（等同于刷新）

<input type="submit">：描述一个提交按钮，可以将表单中的数据提交到指定地址，按钮上默认展示"提交"，可以通过value属性设置其上展示的内容（提交）

<input type="button">：描述一个空按钮，没有任何功能，必须通过value属性设置其上展示的内容（无任何功能）

<button></button>：描述一个多功能按钮，可以通过type属性设置其功能，type="reset|submit(默认)|button"，必须在标签中间设置其上展示的内容（多功能，设置type来获取相应功能)

2、表单提交数据的格式
表单提交数据的方式是name=value&name=value(在游览器上面显示)

name指表单项的name属性值
value指表单项的value属性值
因此，每一个表单项都必须设置name属性
文本框、密码框、文本域不需要设置value，因为用户输入的内容就是value属性值
隐藏域、单选框、复选框必须手动设置value
文件域可以不设置value，value默认是选择的文件的文件名

下拉框可以设置value也可以不设置value，下拉框提交时，会默认将option标签中的内容作为value，但是若option中的内容和要提交的内容不一致时，必须设置value

3、表单提交数据的方式
form标签中的method可以设置表单提交数据的方式：
method="get(默认)|post"
method="get"，此时提交的表单数据会拼接在地址栏中，格式为：
地址?name=value&name=value&name=value

method="post"，此时提交的表单数据不会拼接在地址栏中，而是在请求报文的请求体中，格式仍然为name=value&name=value&name=value

4、get和post的区别
a>get提交方式会将提交的数据拼接在地址栏中，而post提交方式会将提交的数据保存在请求报文的请求体中
b>get相对而言不安全，post相对而言安全
c>get传输数据的速度较快，而post传输数据的速度较慢
d>get传输的数据量较小，而post传输的数据量较大，可以认为无限制
e>上传文件时一定不能使用get，只能使用post

需求

创建一个Module，其中创建一个页面"index.html"，创建一个目录"pages"
index.html中有两个超链接，"注册"和"登录"
在pages中创建四个页面，"login.html"、"login_success.html"、"regist.html"、"regist_success.html"
login.html中设置一个表单，有用户名和密码两个表单项，以post的方式提交到"login_success.html"
在"login_success.html"中，使用"h1"标签显示登录成功，并设置"回首页"的超链接跳转到首页
regist.html中设置一个表单，将今天所学的所有的表单项进行练习，以post的方式提交到"regist_success.html"
在"regist_success.html"中，使用"h1"标签显示注册成功，并设置"回首页"的超链接跳转到首页

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目标页面 </title>
</head>
<body>
<a href="pages/login.html" target="_blank" >登录</a>
<a href="pages/regist.html" target="_blank">注册</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="login_success.html" method="post">
    用户名：<input type="text"><br>
    密码: <input type="password">
<input type="submit" value="登录">
<input type="reset" value="取消">
</form>






</body>
</html>

login_success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<h1>登录成功</h1>
<a href="../index.html" target="_blank">返回首页</a>
</body>
</html>

regist.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form action="regist_success.html" method="post">
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="password"><br>
    性别：<input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女">女 <br>
    爱好：<input type="checkbox" name="hobby" value="唱">唱 <input type="checkbox" name="hobby" value="跳">跳
         <input type="checkbox" name="hobby" value="rap">rap <input type="checkbox" name="hobby" value="篮球">篮球 <br>
    头像：<input type="file" name="photo"><br>
    专业：<select name="major">
    <option value="人工智能">人工智能</option>
    <option value="大数据"> 大数据</option>
    <option value="java"> java</option>
    <option value="汽修"> 汽修</option>
    </select><br>
    自我介绍：<textarea name="zwjs" cols="80" rows="20"></textarea>
    </select><br>
<input type="submit" value="注册">
<input type="reset" value="取消">

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h>注册成功</h>
<a href="../index.html" target="_blank">返回首页</a>
</body>
</html>