文档章节

HTML-表单

人间四月
 人间四月
发布于 2015/11/28 15:35
字数 1195
阅读 38
收藏 1
点赞 0
评论 0

HTML-表单

  • 表单的概念:

        表单主要是用来获取客户端用户数据,注册表单,查询表单,登录表单

  • 表单的工作原理:

    • 浏览有表单的网页,填写一些必要的信息,然后点击提交按钮

    • 表单数据,通过互联网,传到了服务器上

    • 服务器上有专门的程序,对表单数据进行验证。验证成功,返回正确的信息。验证失败,返回错误信息。

    • 从表单的工作原理来看,表单的制作分俩个部分,前台页面制作,后台对表单数据处理

  • 表单的基本结构

<form name="form">
    用户名:<input type="text" name="username" />
    密码:<input type="password" name="uerpassword" />
    <input type="submit" value="提交表单" />

</form>
  • <form>标记的属性-块元素

    • name:表单名称,给javascript用,js主要用来做客户端表单验证。

    • method:表单的提交方式    GET/POST

    • action:指定表单的处理程序,一般是PHP程序, action为空,提交给当前文件

    • enctype:指定表单数据的编码方式,该属性只能用在 method=“POST”的方式下,有两个值,

      • application/x-www-form-urldecoded    //默认的编码方式

      • multipart/form-data    //上传文件时用到的加密方式


GET方法和POST方法:
  • GET提交方式

    • GET方式,是将表单数据追加到action指定的处理程序后面,然后向服务器发出数据,地址栏默认传值方式

                URL说明:

                                action文件和查询字符串之间用?分隔

                                没两个表单元素的“名称=值”之间用“&”分隔

                                表单名称和表单值之间用“=”分隔

                如果某个表单元素,不想往服务器传递数据,则不需要加name属性,没有name服务器获取不到对应的值  

    • GET方式特点:

      • GET方式不能提交敏感数据

      • GET方式只能提交少量数据,地址栏的长度是有限制的 100字符

      • GET不能上传附件

  • POST提交方式

    • POST直接将表单数据传递给表单处理程序

    • POST方式特点:

      • POST方式相对安全

      • POST方式可以提交海量数据

      • POST方式可以上传数据


表单元素

  • 单行文本域
    • 语法格式 <input type="text" 属性=“值”/>

    • 常用属性

      • name:文本框的名称。命名规则:字母,数字,下划线,只能以字母开头

      • type:表单元素类型

      • value:文本框中的值

      • size:文本框的长度,以”字符“为单位

      • maxlength:最多可以输入的字符,超出大小的输入不显示

      • readonly:只读属性,可以选中,不能修改 ,readonly="readonly"

      • disabled:禁用属性。不能选中,不能修改 ,disabled="disabled"


  • 单行密码域
    • 语法格式<input type="password" 属性=”值“ />

    • 常用属性:同上


  • 单选按钮
    • 语法格式:<input type="radio" 属性=”值“ />

    • 常用属性:

      • name:元素名称

      • value:元素的值

      • checked:默认选中项, checked="checked"

      • <input type="radio" name="sex" value="男" checked="checked" />男
        <input type="radio" name="sex" value="女" />女

  • 复选框
    • 语法格式:<input type="checkbox" 属性=”值“ />

    • 常用属性:

      • name:元素名称

      • value:元素的值

      • checked:默认选中, checked="checked"

      • <input type="checkbox" name="like" value="game1" checked="checked" />
        <input type="checkbox" name="like" value="game2" />
        <input type="checkbox" name="like" value="game3" />

  • 下拉列表
 <select name="名称">
     <option value="北京">北京</option>
     <option value="天津">天津</option>
     <option value="上海">上海</option>
     
</select>

        <select>标记的属性,只有一个name属性

        <option>标记的属性,value属性,selected属性(默认选中),selected="selected"

  


  • 文本区域
  • 语法格式
<textarea name="名称" cols="宽度" rows="高度">……</textarea>
  • 常用属性:

    • name:元素名称

    • 没有value

    • cols:宽度,字符为单位

    • rows:高度,行为单位

  • 提示:<textarea>标签之间是默认文本内容</textarea>


  • 按钮-4种按钮
  • 提交按钮
    • <input type="sbumit" value="提交按钮" />
  • 重置按钮
    • <input type="reset" value"重置按钮" />
  • 图片按钮
    • <input type="image" src="image/001.png" />    //提交表单功能
  • 普通按钮
    • <input type="button" onclick="javascript:winsow.clode()" value="关闭窗口" />    //普通按钮不具备任何功能,配合JavaScript使用

  • 上传文件域
    • 语法格式:<input type="file" 属性=”属性“ />

    • 常用属性:

      • name:表单元素的名称

      • value:表单元素的值,上传的文件名,考虑安全因素,value只读属性,只能手动选择上传的文件,不能自己输入


  • 隐藏域
    • 功能:就是看不见的框,传递一些值,不想让别人看见

    • 用于后台程序,修改某条内容传递的id号

    • 语法格式:<input type="hidden" name="名称" value="默认值" />

    • 常用属性:

      • name:表单元素的名称

      • value:表单元素的值,上传的文件名,考虑安全因素,value只读属性,只能手动选择上传的文件,不能自己输入













































© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
22 非常有用 HTML5 + CSS3 表单教程

使用 HTML5 和 CSS3 你可以创建各种创新的 Web 表单,在接下来的内容中我们将为你推荐 22 个这样的教程。 登录表单 HTML5 & CSS3 联系表单 构建一个简单的联系表单 样式漂亮的联系表单 用户注...

小编辑
2011/10/24
6.2K
3
10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单...

android哥哥
2012/08/06
8.7K
10
【Angular】——表单处理

纯HTML表单:显示表单项,校验用户输入,提交表单数据。就是普通写的HTML页面。 模板式表单:表单的数据模型是通过组件模板中的相关指令来定义的。因为使用这种方式定义表单的数据模型时,我...

fjj15732621696
03/18
0
0
华丽的HTML5/CSS3输入框聚焦发光动画表单

华丽的HTML5/CSS3输入框聚焦发光动画表单 HTML5资源教程2017-11-038 阅读 css3聚焦表单html5输入框动画 今天我们要给大家分享一款非常特别的登录表单,基于 HTML5 和CSS3。当表单加载的时候,...

HTML5资源教程
2017/11/03
0
0
10款AJAX/CSS/HTML的在线表单生成器

日期:2011/12/24 来源:GBin1.com 在这篇文章中,我们将介绍10个超棒的在线表单生成器,帮助你整合web表单到你的网站中,希望大家喜欢! 1. Form Assembly 这是个web表单的CSS样式集合 2. J...

gbin1
2011/12/25
8.3K
3
HTML5 表单元素

HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <keygen> <output> 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以...

wybo521
2016/01/07
16
0
爱上MVC3系列~Html.BeginForm与Ajax.BeginForm

Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交,这对于我们开发者来说是...

mcy247
2017/12/06
0
0
HTML标签大全(三)

表单标记 ·C 代表 Close needed 表示该标记属于围堵标记,即需要结束标记 。 ·N 代表 No need to close 表示该标记属空标记,即不需要结束标记。 C 标签用于为用户输入创建 HTML 表单。 表...

andylhx
2014/05/09
0
0
jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素 .text()用来读取或修改元...

大橙子zc
2016/03/31
64
0
web工作流管理系统开发之十二 同一张表单在流程多节点中流转的权限控件

以前写过一篇 表单权限与流程的权限控制;文章,没有具体的去实现,实践证明,同一张表单在多流程节点中流转,是工作流和电子表单必须要处理的问题。 工作流系统和电子表单相结合,达到同一张...

长平狐
2012/10/11
264
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

百度云iOS架构师在职场中的忠告

1.工具不能代替思考 在我多年的咨询工作和与许多组织和管理者的共事中,我发现了修复问题的共同套路,那就是管理人员相信工具可以“解决”给出的问题。当问题域被理解透彻,并且不可能有很多...

_小迷糊
23分钟前
0
0
Java基础——异常

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 异常处理: 可以挖很多个陷阱,但是不要都是一样...

凯哥学堂
35分钟前
0
0
180723-Quick-Task 动态脚本支持框架之结构设计篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/23/180723-Quick-Task-动态脚本支持框架之结构设计篇/ Quick-Task 动态脚本支持框架之结构设计篇 相关博文: 180702-QuickTask动态脚本...

小灰灰Blog
39分钟前
0
0
SBT 常用开发技巧

SBT 一直以来都是 Scala 开发者不可言说的痛,最主要的原因就是官方文档维护质量较差,没有经过系统的、循序渐进式的整理,导致初学者入门门槛较高。虽然也有其它构建工具可以选择(例如 Mill...

joymufeng
43分钟前
0
0
HBase in Practice - 性能、监控及问题解决

李钰(社区ID:Yu Li),阿里巴巴计算平台事业部高级技术专家,HBase开源社区PMC&committer。开源技术爱好者,主要关注分布式系统设计、大数据基础平台建设等领域。连续4年基于HBase/HDFS设计和...

中国HBase技术社区
44分钟前
1
0
ES18-JAVA API 批量操作

1.批量查询 Multi Get API public static void multiGet() {// 批量查询MultiGetResponse response = getClient().prepareMultiGet().add("my_person", "my_index", "1")// 查......

贾峰uk
49分钟前
0
0
SpringBoot2.0使用health

1,引入actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency> 2,application.properties ......

暗中观察
56分钟前
0
0
阿里巴巴Java开发规约

###编程规约 命名风格 【强制】代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束 【强制】代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。...

简心
今天
0
0
如何用TypeScript来创建一个简单的Web应用

转载地址 如何用TypeScript来创建一个简单的Web应用 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) npm install -g typescript 构建你的第一个TypeScript文件 创建...

durban
今天
0
0
分享好友,朋友圈自定义分享链接无效

这个问题是微信6.5.6版本以后,修改了分享规则:分享的连接必须在公众号后台设定的js安全域名内

LM_Mike
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部