#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

时间:2021-08-22 15:27:59

先看看表单如何工作吧


请求

#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

 


响应

#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

 


简要工作流程:

  1. 浏览器加载页面

  2. 用户输入数据

  3. 用户提交表单

  4. 服务器响应


概念都清楚了,我们来写表单吧


只有一个html文件

#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

这是显示
#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

你可以向空白框框里写一些东西,然后点击提交

数据会发到web服务器的contest.php里,当然了,你也可以自己写一个php文件


下面是index.htm的l代码

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>TEST</title>
</head>
<body>
<!--form是表单主体-->
<form action = "http://wickedlysmart.com/hfhtmlcss/contest.php" method = "POST">    <!--POST是表单发送时用的HTTP协议-->
<p>Jsut type in your name (and click Submit) to enter the contest:
<br>
First name : <input type = "text" name = "firstname" value = "">    <!--input元素代表一个输入框,type = "text"告诉我们要输入文本,也就是字符串,name属性是这个input元素的名字,value属性用于在输入框里显示一些东西,但是输入框还要给用户输入数据,所以value属性空白为好-->
<br>
Last name: <input type = "text" name = "lastname" value = "">
<br>
<input type = "submit" value = "提交">    <!--当value = ""时这个输入框上写的是submit,但submit只是type属性的值,和输入框的显示没关系,不可以修改,value属性才是导致输入框上显示不同的原因-->
</form>
</body>
</html>

有关于HTTP协议,请等待我的教程,或者去看别人的也可以


深度解析一下<form action = "http://wickedlysmart.com/hfhtmlcss/contest.php" method = "POST">这个元素

form代表表单的开始

/form代表表单的结束

http://wickedlysmart.com/ 代表web服务器的URL

hfhtmlcss 代表脚本所在的文件夹

contest.php 代表脚本的文件名

method = "POST" 决定表单数据如何发送给服务器


//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买


转载请注明出处  by:M_ZPHr

最后修改日期:2019-01-19