先看看表单如何工作吧

请求

 

响应

 

简要工作流程：

  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. [编译] 5、在Linux下搭建安卓APP的开发烧写环境（makefile版）—— 在Linux上用命令行+VIM开发安卓APP

    星期三, 19. 九月 2018 02:19上午 - BEAUTIFULZZZZ 0)前言 本文不讨论用IDE和文本编辑器开发的优劣,是基于以下两点考虑去尝试用命令行编译安卓APP的: 了解安卓APP ...

  2. FFmpeg 结构体学习(三)： AVPacket 分析

    在上文FFmpeg 结构体学习(二): AVStream 分析我们学习了AVStream结构体的相关内容.本文,我们将讲述一下AVPacket. AVPacket是存储压缩编码数据相关信息的结构体.下 ...

  3. 查看和修改Linux服务器的时区和时间

    一.查看和修改Linux的时区1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区方法 A 命令 : "tzselect" 方法 ...

  4. [Swift]LeetCode268. 缺失数字 | Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  5. [Swift]LeetCode518. 零钱兑换 II | Coin Change 2

    You are given coins of different denominations and a total amount of money. Write a function to comp ...

  6. Python---第3方库

    使用pip命令安装 pip  -h  查看pip使用帮助 pip install  <第3方库名> pip install -U <第3方库名>  对已安装的第三方库更新 pi ...

  7. Kubernetes 笔记 04 架构是个好东西

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  8. 工作5年的Java程序员，才学会阅读源码，可悲吗？

    最近一位5年开发经验的群友与我聊天 他说:最近慢慢的尝试去看spring的源码,学习spring,以前都只是会用就行了,但是越是到后面,发现只懂怎么用还不够,在面试的时候经常被问到一些开源框架的源码问 ...

  9. 从锅炉工到AI专家(5)

    图像识别基本原理 从上一篇开始,我们终于进入到了TensorFlow机器学习的世界.采用第一个分类算法进行手写数字识别得到了一个91%左右的识别率结果,进展可喜,但成绩尚不能令人满意. 结果不满意的原 ...

  10. 学习springboot

    一般而言,写个Javaweb应用搭建环境都可能要几十分钟,下载个tomcat服务器,再加上各种xml配置等等,很烦躁,而且每个web应用的配置还差不多,都是什么web.xml,application. ...