#WEB安全基础 : HTML/CSS | 0x10实现交互_表单
先看看表单如何工作吧
请求
响应
简要工作流程:
浏览器加载页面
用户输入数据
用户提交表单
服务器响应
概念都清楚了,我们来写表单吧
只有一个html文件


你可以向空白框框里写一些东西,然后点击提交
数据会发到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
#WEB安全基础 : HTML/CSS | 0x10实现交互_表单的更多相关文章
- #WEB安全基础 : HTML/CSS | 0x10.1更多表单
来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- css解决select下拉表单option高度的办法
css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...
- 使用CSS来渲染HTML的表单元素
效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...
- 前端与后台可能需要使用交互的表单form,input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST
HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...
- HTML+CSS笔记 表格,超链接,图片,表单
表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...
- [水煮 ASP.NET Web API2 方法论](1-3)如何接收 HTML 表单请求
问题 我们想创建一个能够处理 HTML表单的 ASP.NET Web API 应用程序(使用 application/x-www-form-urlencoded 方式提交数据). 解决方案 我们可以创 ...
随机推荐
- [译文]Domain Driven Design Reference(六)—— 提炼战略设计
本书是Eric Evans对他自己写的<领域驱动设计-软件核心复杂性应对之道>的一本字典式的参考书,可用于快速查找<领域驱动设计>中的诸多概念及其简明解释. 其它本系列其它文章 ...
- java byte 梳理
最近写编解码的代码比较多,抽一点时间梳理下java下byte的解析.在例子代码中主要涉及的知识点就两块: 1.byte代表8个bit,其中最高位是符号位: 2.当我们用String类的getBytes ...
- 急急如律令!火速搭建一个C#即时通信系统!(附源码分享——高度可移植!)
(2016年3月更:由于后来了解到GGTalk开源即时通讯系统,因此直接采用了该资源用于项目开发,在此对作者表示由衷的感谢!) —————————————————————————————————— 人 ...
- 微信小程序wx.request请求用POST后台得不到传递数据
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- 【安富莱二代示波器教程】第19章 附件E---参考资料
第19章 附件E---参考资料 DSP教程 http://forum.armfly.com/forum.php?mod=viewthread&tid=3886 . FreeRTOS教 ...
- linux入门--Linux和UNIX的关系及区别
UNIX 与 Linux 之间的关系是一个很有意思的话题.在目前主流的服务器端操作系统中,UNIX 诞生于 20 世纪 60 年代末,Windows 诞生于 20 世纪 80 年代中期,Linux 诞 ...
- 花点时间顺顺Git(上)
花点时间顺顺Git(上) 为了让你们点进来贼努力的想了一个色彩斑斓大吉大利的标题,好,看正文 历史:Linus的作者创建了开源的Linux,02年以前代码管理都依赖手动合并,后来管理不了了,拒绝SVN ...
- 关于CKEditor 4.0 过滤html标签
今天遇到一个问题,就是整个页面存储在数据库中,然后后台可以进行编辑,开始我使用ckeditor进行编辑,后来发现他会自动的过滤掉一些html标签,花了一上午的时间在网上查找资料,并且在官网也看了,但是 ...
- 微信小程序入门(六)
28.页面路由 框架以栈的形式维护了当前的所有页面. 当发生路由切换的时候,页面栈的表现如下: 路由方式 29.小程序事件流 什么是事件? 事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻 ...
- System.Data.Entity.Infrastructure.DbUpdateException
异常描述: 捕捉到 System.Data.Entity.Infrastructure.DbUpdateException HResult=-2146233087 Message=无法更新 E ...