Erlo

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

2019-01-17 15:02:36 发布   703 浏览  
页面报错/反馈
收藏 点赞

先看看表单如何工作吧


请求

 


响应

 


简要工作流程:

  1. 浏览器加载页面

  2. 用户输入数据

  3. 用户提交表单

  4. 服务器响应


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


只有一个html文件

 


这是显示

 


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

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


下面是index.htm的l代码


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

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认