欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-14 22:09:36
先看看表单如何工作吧 请求 响应 简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件 这是显示 你可以向空白框框里写一些东西,然后点击提交 数据会发到web服务器的contest.php里,当然了,你也可以自己写一个php文件 ......

先看看表单如何工作吧


请求

#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代表表单的结束

 代表web服务器的url

hfhtmlcss 代表脚本所在的文件夹

contest.php 代表脚本的文件名

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


//本系列教程基于《head first html与css(第二版)》,此书国内各大购物网站皆可购买


转载请注明出处  by:m_zphr

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