FLYSASA

Fair to be late, but never absent


  • 首页

  • 标签

  • 分类

  • 归档

浅析form表单

发表于 2017-09-16 | 分类于 HTML

1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

功能:

用于申明表单,定义采集数据的范围,也就是

和
里面包含的数据将被提交到服务器或者电子邮件里。

常用的input标签

标签 描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 “浏览”按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。圆点表示。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

[参考](http://www.w3school.com.cn/tags/att_input_type.asp)

2、post 和 get 方式的区别?

区别:

1.get是从服务器上获取数据,post是向服务器传送数据。但是不绝对,get也可以传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。(get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接);
post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL.
3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5.get安全性非常低,post安全性较高。
6.HTTP 定义了与服务器交互的不同方法,最基本的方法是 GET 和 POST。事实上 GET 适用于多数请求,而保留 POST 仅用于更新站点。根据 HTTP 规范,GET 用于信息获取,而且应该是 安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说,GET 请求一般不应产生副作用。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。从根本上讲,其目标是当用户打开一个链接时,她可以确信从自身的角度来看没有改变资源。 比如,新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻,该操作仍然被认为是安全的和幂等的,因为它总是返回当前的新闻。反之亦然。POST 请求就不那么轻松了。POST 表示可能改变服务器上的资源的请求。仍然以新闻站点为例,读者对文章的注解应该通过 POST 请求实现,因为在注解提交之后站点已经不同了
7.在FORM提交的时候,如果不指定Method,则默认为GET请求,Form中提交的数据将会附加在url之后,以?分开与url分开。字母数字字符原 样发送,但空格转换为“+“号,其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII(或ISO Latin-1)值。GET请求请提交的数据放置在HTTP请求协议头中,而POST提交的数据则放在实体数据中;GET方式提交的数据最多只能有1024字节,而POST则没有此限制。

3.在input里,name 有什么作用?

name属性规定了input元素的名称,用于后续提交表单数据,等于某类数据的索引.例如,上传表单时,如果姓名这一栏input没有”name”,那么即使填好姓名,上传后,后台程序无法理解这个内容是属于数据,而”name”定义了这个数据的索引.

4.radio 如何 分组?

每一个的name属性都取同一个名字,即为同一组,同一组的radio,只能单选。

5.placeholder 属性有什么作用?

placeholder的参数可以作为输入的提示(提示用户输入内容和格式),与value不同,placeholder并不是input中真的内容,在输入时placeholder会消失而不是代替。

6.type=hidden隐藏域有什么作用? 举例说明

隐藏不想让用户看到的信息,但是这些信息对于Web应用又是非常必要的。
暂存信息:后端在构造web页面的过程中,通过hidden隐藏域在页面中添加了相关数据信息(用户对网页进行操作时可能会用到这些数据信息)
信息安全:后端在构造web页面的过程中,可以通过hidden隐藏域在页面中添加相关的验证信息,当form表单被提交后,服务器会收到该验证信息,通过一定的算法校验该验证信息,可以有效防止非法请求对数据库的增删改查,提高了web应用的安全性。

举例

1.可以用来存储记录用户身份的信息,当表单提交时以确定用户身份。这种方式相较于cookie而言更简单,而且不会有浏览器不支持和用户禁用cookie的烦恼。
2.有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx"然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
3.有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。
4.javascript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。

HTML知识点

发表于 2017-09-01 | 分类于 HTML

1.HTML、XML、XHTML 有什么区别?

HTML:超文本标记语言(Hyper Text Markup Language),是语法较为松散,不严格的web语言。

XML :可扩展标记语言(The Extensible Markup Language),主要用于储存数据和结构

XHTML:可扩展超文本标记语言(Extensible Hyper Text Markup Language),基于XML,作用于HTML类似,但语法更严格。

主要不同:

-XHTML 元素必须被正确地嵌套
-XHTML 元素必须被关闭
-XHTML 标签名必须用小写字母
-XHTML 文档必须拥有根元素

2.怎样理解HTML语义化?

选择适合的标签,使用合理的结构,便于开发者阅读,同时让浏览器的机器和爬虫很好的解析。

语义化好处:

1.清晰的页面结构:去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

2.支持更多的设备:屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。

3.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

4.便于团队开发和维护:在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

3.怎样理解内容与样式分离原则?

HTML:内容结构
CSS:样式
JavaScript:行为
1.写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
2.写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
3.HTML 内不允许出现属性样式,尽量不要出现行内样式

内容与样式分离好处:

方便开发人员查找并修改样式,减少网页的代码,文档更清晰易读、易维护

4.有哪些常见的meta标签?

标签 描述
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 声明文档兼容模式,指示IE以目前可用的最高模式显示内容
<meta name="keywords" content="your tags"> 定义针对搜索引擎的关键词
<meta name="author" content="你的姓名"> 定义网页作者
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> 自适应屏幕大小,在移动端展示更合理
<meta http-equiv="pragma" content="no-cache"> 禁用缓存
<meta name="robots" content="index,follow" /> 搜索引擎索引方式

5.文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

DOCTYPE 是document type(文档类型)的简写,文档声明是用于告诉浏览器用什么文档类型来解析页面。
严格模式 现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
混杂模式 指文档开头不明确申明,页面以一种比较宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。
<!doctype html> 的作用是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面。

6.浏览器乱码的原因是什么?如何解决?

乱码产生的根本原因

1.保存的编码格式和浏览器解析时的解码格式不匹配导致
2.乱码一般是英文以外的字符才会出现

解决办法

1.设置标签声明文档使用的字符编码
2.设置正确的字符编码
3.设置浏览器显示正确的编码

7、常见的浏览器有哪些?什么内核?

chrome、Safari、360极速浏览器以及搜狗浏览器高速模式使用WebKit内核
IE、猎豹、360、搜狗、傲游、世界之窗、Avant、腾讯TT使用Trident内核,又称为IE内核。
Firefox、Netscape6至9使用Gecko内核。
Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用Blink内核。

8.列出常见的标签,并简单介绍这些标签用在什么场景?

标 签 使用场景
<html>...</html> 定义了文档的开始点和结束点
<head>..</head> 定义文档的头部,其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
<title>..</title> 定义文档标题
<meta>..</meta> 提供有关页面的元信息
<body>..</body> 定义文档的主体,包含文档的所有内容
<a>..</a> 定义超链接
<img> 图片
<h1>-<h6> 定义标题
<p>..</p> 段落
<ul>..</ul> 定义无序列表
<ol>..</ol> 定义有序列表
<li>..</li> 定义列表项目
<div>..</div> 定义文档中的分区或节
<em>..</em> 强调
<strong>..</strong> 语气更强的强调
<span>..</span> 定义文档中的一小节
<br /> 换行
<table>..</table> 定义表格
<tr>..</tr> 定义表格中的行
<hr /> 创建一条水平线
1…34
Nie

Nie

Fair to be late, but never absent

32 日志
4 分类
GitHub
© 2017 — 2018 Nie
博客
|
主题 — v5.1.4