文档章节

HTML-表单

人间四月
 人间四月
发布于 2015/11/28 15:35
字数 1195
阅读 38
收藏 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只读属性,只能手动选择上传的文件,不能自己输入













































© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 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

没有更多内容

加载失败,请刷新页面

加载更多

sed命令

10月17日任务 9.4/9.5 sed 1.sed(上)(下) 1.sed 匹配功能 #sed -n ‘/root/’ p test.txt 将带有root的内容打印出来 同时支持 . * 还有 + 不过需要脱译,或者在前面选项加r。 支持{ } 支...

hhpuppy
33分钟前
1
0
day120-20181018-英语流利阅读-待学习

千禧一代注意了:一大波公司正向你的钱包袭来 Daniel 2018-10-18 1.今日导读 这几年,你有没有发现,不管是在微信公众号还是在抖音,有越来越多的商家和品牌开始玩起了网络用语和表情包,从卖...

飞鱼说编程
42分钟前
1
0
IOasd

能够使用FileUtils常用方法操作文件 字符流体系介绍 : 在 IO 开发中, 我们传输最频繁的数据为字符, 而以字节的方式来传输字符数据会使程序员丧失对数据内容的判断.因为程序员只认识字符, 不认...

码农屌丝
今天
0
0
创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部