先看看表单如何工作吧

请求

 

响应

 

简要工作流程：

  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>
<!--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实现交互_表单的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  2. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  3. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  4. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  5. 使用CSS来渲染HTML的表单元素

    效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...

  6. 前端与后台可能需要使用交互的表单form，input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

  7. #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

    HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...

  8. HTML+CSS笔记 表格,超链接,图片,表单

    表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...

  9. [水煮 ASP.NET Web API2 方法论]（1-3）如何接收 HTML 表单请求

    问题 我们想创建一个能够处理 HTML表单的 ASP.NET Web API 应用程序(使用 application/x-www-form-urlencoded 方式提交数据). 解决方案 我们可以创 ...

随机推荐

  1. 【安富莱】【RL-TCPnet网络教程】第10章 RL-TCPnet网络协议栈移植（FreeRTOS）

    第10章     RL-TCPnet网络协议栈移植(FreeRTOS) 本章教程为大家讲解RL-TCPnet网络协议栈的FreeRTOS操作系统移植方式,学习了第6章讲解的底层驱动接口函数之后,移植就 ...

  2. [Swift]LeetCode307. 区域和检索 - 数组可修改 | Range Sum Query - Mutable

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  3. Python 的字符串

    Python 的字符串 在最新的 Python 3 版本中,字符串是以 Unicode 编码的,也就是说,Python 的字符串支持多语言,例如: print('包含中文的 str') 对于单个字符的 ...

  4. iOS——调试工具LLDB学习

    一.前言 LLDB是个开源的内置于XCode的具有REPL(read-eval-print-loop)特征的Debugger,其可以安装C++或者Python插件.在日常的开发和调试过程中给开发人员带 ...

  5. python—day15 包的认识、执行顺序、执行流程、循环导入、包的导入、绝对、相对导入

    一.包的认识   包通过文件夹来管理一系列功能相近的模块 ​ 包:一系列模块的集合体 重点:包中一定有一个专门用来管理包中所有模块的文件 包名:存放一系列模块的文件夹名字 包名(包对象)存放的是管理模 ...

  6. [Abp 源码分析]十六、后台作业与后台工作者

    0. 简介 在某些时候我们可能会需要执行后台任务,或者是执行一些周期性的任务.比如说可能每隔 1 个小时要清除某个临时文件夹内的数据,可能用户会要针对某一个用户群来群发一组短信.前面这些就是典型的应用 ...

  7. C# 多线程学习笔记 - 2

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  8. ReentrantLock 实现原理

    使用 synchronize 来做同步处理时,锁的获取和释放都是隐式的,实现的原理是通过编译后加上不同的机器指令来实现. 而 ReentrantLock 就是一个普通的类,它是基于 AQS(Abstr ...

  9. 死磕NodeJs之REPL与For Server,我的艰辛的旅程(一)

    ode.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并接 ...

  10. Qt之自定义托盘(二)

    上一篇文章讲述了自定义Qt托盘,不过不是使用QSystemTrayIcon这个类,而是我们自己完全自定义的一个类,我们只需要处理这个类的鼠标hover.鼠标左键点击.鼠标右键点击和鼠标左键双击,就可以 ...