文档章节

HTML-表单

人间四月
 人间四月
发布于 2015/11/28 15:35
字数 1195
阅读 41
收藏 1

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只读属性,只能手动选择上传的文件,不能自己输入













































© 著作权归作者所有

共有 人打赏支持
上一篇: Python 正则学习
下一篇: HTML-表格标签
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
私信 提问
【Angular】——表单处理

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

fjj15732621696
2018/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.9K
3
jquery中html()、text()、val()的区别

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

大橙子zc
2016/03/31
64
0
jquery的html,text,val

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读...

随智阔
2013/02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在React工程中使用JavaScript Barcode SDK创建Web条形码应用

基于WebAssembly构建的Dynamsoft JavaScript Barcode SDK让Web开发者能够创建适用于浏览器的高性能条码应用。这篇文章分享下如何使用React快速创建一个简单的Web条形码扫描应用。 下载 Node...

yushulx
29分钟前
1
0
java lambda笔记

c#中的lambda表达式简直不要太爽,但是感觉java的lambda和c#比有待继续提高。 先搞个筛选List集合的东西,我们先搞个集合玩玩。 List<Person> person = new ArrayList<Person>();Person p...

朝如青丝暮成雪
29分钟前
0
0
最严新规发布 网络短视频平台该如何降低违规风险?

1月9日中国网络视听节目服务协会对外正式发布了多项规范,对版权视频保护及违规内容,都进行了更加详细的标准制定,整体政策更加严格。 规范规定,网络短视频平台应当履行版权保护责任,不得...

阿里云官方博客
38分钟前
1
0
深入解读阿里云数据库POLARDB核心功能物理复制技术

日志是数据库的重要组成部份,按顺序以增量的方式记录了数据库上所有的操作,日志模块的设计对于数据库的可靠性、稳定性和性能都非常重要。 可靠性方面,在有一个数据文件的基础全量备份后,...

zhaowei121
44分钟前
1
0
CentOS 非root 用户 使用sudo 命令免密码

1. 使用su/su - 命令进入root权限下; 2. 给/etc/sudoers文件添加写权限 chmod u+w /etc/sudoers 3.找到“root ALL=(ALL) ALL ”,在后面添加:"dba ALL=(ALL) NOPASSWD: ALL" 4.保存退出,并......

驛路梨花醉美
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部