html表单对于网页目地,html - 表单form

一、表单

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

from表单：实现用户与web服务器的交互

以键值对的形式发过去{"":"haiyan","":"123"}

如果没有name属性，你的数据是不过去的

name:键名

请求server端的方式：

get:请求会放在url后面 username=yaun&password =123

post:请求会放在请求体里

关于 url的内容

url: https://www.baidu.com(协议：域名(也是ip+端口))

url: http:127.0.0.1:8800/blog/addBlog(协议：ip:端口/)

url: http:127.0.0.1:8800/blog/addBlog？username = yuan

http:协议

127.0.0.1:8800：ip地址与端口

blog/addBlog：url的路径(path)

username = yuan:get请求数据

请求协议：

浏览器发给服务器(get请求,post请求)

格式：

请求首行

请求头：就是一组组键值对

换行 \n,\n\r

请求数据：有两种方式

if get :

url?data

if post :

请求数据

get请求：安全性差，数据量有限(当设计到查询的时候会用到get请求)

那些是get请求(一般都是查询数据库操作)：

1.url访问server端

2.超链接访问，即a标签

post请求：相对于get安全点，，但是没有绝对的安全(修删改可以用post)

相应协议：

表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

系列标签

'''

<> 表单类型

type: text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

placeholder:输入框默认灰色字体

上传文件注意两点： 请求方式必须是post enctype="multipart/form-data" <> 表单属性 name: 表单提交项的键. 注意和id属性的区别：name属性是和服务器通信时使用的名称； 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使. '''

select标签

'''

下拉选标签属性

name:表单提交项的键.

size：选项个数

multiple：multiple

为每一项加上分组

下拉选中的每一项 属性：

value:表单提交项的值.

selected: selected下拉选默认被选中

'''

多行文本框

‘’''

默认内容

'''

标签

定义： 标签为 input 元素定义标注(标记)。

说明：

1 label 元素不会向用户呈现任何特殊效果。

2 标签的 for 属性值应当与相关元素的 id 属性值相同。

'''

用户名

'''

Title

注册页面

姓名

密码

爱好： 音乐电影

性别： 男女

省

邯郸

廊坊

唐山

保定

简介

2.div和span标签

只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.

： 表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

HTML ------ 关于表单 Form

Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...

Bootstrap~表单Form

回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

表单 - Form - EasyUI提供的表单异步提交

方案一 被提交的表单

DHTMLX 前端框架 建立你的一个应用程序 教程&lpar;九&rpar;--绑定表单Form到表格Grrid中

绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

DHTMLX 前端框架 建立你的一个应用程序 教程&lpar;八&rpar;-- 添加表单Form

添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

微信小程序基础之表单Form的使用

表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","i ...

HTML(七)HTML 表单&lpar;form元素介绍，input元素的常用type类型，input元素的常用属性&rpar;

前言 表单是网页与用户的交互工具,由一个

元素作为容器构成,封装其他任何数量的表单控件,还有其他任何元素里可用的标签 表单能够包含

表单&lt&semi;form&gt&semi;&lt&semi;&sol;form&gt&semi;提交方式的区别

表单的提交方式有两种:pos ...

随机推荐

IC&sol;RFID&sol;NFC 关系与区别

IC卡 (Integrated Circuit Card,集成电路卡) 有些国家和地区也称智能卡(smart card).智慧卡(intelligent card).微电路卡(microcircuit ...

Cocos2dx淌坑日记&colon;粒子系统PositionType的正确使用

Cocos2dx中的粒子系统,有三种定位方式,对应于不同需求. 之前我有一个想做的效果,是类似彗星的扫尾.但是当父节点也就是CCLayer跟着物体移动的时候,发现尾巴并没有跟随CCLayer移动,而是 ...

Spring中的ApplicationContext事件机制

ApplicationContext的事件机制是观察者设计模式的实现,通过ApplicationEvent类和ApplicationListerner接口来实现. 1. 创建EmailEvent pu ...

WCF宿主端检验队列

ServiceHost host = new ServiceHost(typeof(Service1)); if (MessageQueue.Exists(@".\private\MyMes ...

洛谷P2723 丑数 Humble Numbers

P2723 丑数 Humble Numbers 52通过 138提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目背景 对于一给定的素数 ...

Android笔记——PreferenceActivity结合PreferenceFragment创建设置界面

1.创建类继承PreferenceActivity 2.该类必须重写OnBuildHeaders和isValidFragment方法.         (1)OnBuildHeaders方法中使用lo ...

Django之ORM字段和字段参数

ORM介绍 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 Django中的ORM Django项目使用MySQL数据库 Model 快速入门 字段 自定义字段 字段参数 Model ...

&lbrack;ZJOI2013&rsqb;K大数查询

Description: 给定一个序列,支持两种操作 1.在[L,R]的每个位置上加上一个数 (注意一个位置上有多个数) 2.查询[L,R]上所有数中的第K大 Hint: \(n,m<=5e4\ ...

清理docker容器的日志大小

Docker容器日志清理 date :2019-04-08  13:57:40 1. 问题 docker容器日志导致主机磁盘空间满了.docker logs -f container_name 发现大 ...

struts2文件上传大小限制问题小结&lpar;引用&rpar;

最后解决办法: 页面js控制上传文件的大小,在页面进行控制.如下代码 inputs是所有文本上传input DOM //名称信息 var nameStr=''; //大小信息 var sizeStr= ...