先看看表单如何工作吧

请求

 

响应

 

简要工作流程：

  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. QEMU KVM Libvirt手册(9): network

    虚拟网卡由-net nic定义 # qemu-system-x86_64 -enable-kvm -name ubuntutest  -m 2048 -hda ubuntutest.img -vnc ...

  2. 使用cAdvisor+Influxdb+Grafana监控系统

      今天准备开始研究研究当前非常流行的Grafana+Influxdb监控系统,两者都是非常轻量级的应用但是功能却异常强大,可以说Grafana在作图显示方面真的毫不逊色与Cacti. 组件介绍 cA ...

  3. Select下拉框使用ajax异步绑定数据

    <!--前端样式--> <style> #searchs { width: 200px; position: absolute; border-top: none; margi ...

  4. Pycharm中配置鼠标悬停快速提示方法参数

    第一步: 第二步: 演示:

  5. [Swift]LeetCode62. 不同路径 | Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  6. [Swift]LeetCode633. 平方数之和 | Sum of Square Numbers

    Given a non-negative integer c, your task is to decide whether there're two integers a and b such th ...

  7. DOM事件第二弹（UIEvent事件）

    此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正. 一.uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', i ...

  8. 关于AJAX异步请求

    一个HTTP请求由4个部分组成: *HTTP请求方法或“动作” *正在请求的URL *一个可选的请求头集合,其中可能包括身份验证信息 *一个可选的请求主体 服务器返回的HTTP响应包含3部分: *一个 ...

  9. vue keep-alive 实现详情返回列表保留页面数据

    实现功能 详情页返回列表页,列表页保留上次浏览位置 其它页面进入到列表表,列表页刷新 当详情页有数据改变时,列表页也要更新该条数据 实现思路 用keep-alive保留列表页面数据 activated ...

  10. 使用 Jaeger 完成服务间的链路追踪

    世上本没有路,走的人多了,便变成了路 -- 鲁迅     本次讨论的话题就是需要在各个服务之间踏出条"路",让问题有"路"可循. 至于为什么用 jaeger.. ...