• web从入门开始(5)-----表单


    1.   表单的概念

    是用来获取客户端用户数据的(信息)的。如:注册表单,查询表单,登录表单等。

    2.  表单的工作原理

    1.浏览有表单的网页,填写一些必要的信息,然后单击某个按钮,进行提交。

    2.这些表单数据,通过互联网,传递到服务器上。

    3.服务器上有专门的程序对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),并返回一个验证成功的信息。验证失败后,就会返回一个错误的信息。

    从上面表单的工作原理看:表单的制作分为两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。

    3.   表单结构

    4. <form>标记属性---块元素

    l  name:用来区分表单,主要是给javascript来用,JS主要是来做客户端标段验证

    l  method:表单的提交方式 取值:get   post

    l  action:指定表单的处理程序,一般是PHP文件。

      u  如果action为空,那么表单会把数据提交给当前文件

    l  enctype:表单数据的加密方式,这个属性,只能用在method=”post”的情况下

      u  取值application/x-www-fonn-urldecoded //默认的加密方式

      u  Multipart/fonn-date //上传c文件,该值必须是这个

    5. GET方式和POST方式

    1. GET提交方式(基本不用,因为不安全)

    GET方式,在地址栏中将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求

    上面URL说明

      u  login.php 是表单处理程序文件

      u  usename=yao&userpwd=123456 是表单提交的数据,又称为查询字符串

      u  action文件和查询字符串用“?”分隔

      u  每两个表单元素的“名称=值”之间用“&”分割

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

    如果某个表单元素,不想往服务器传递数据,那么,我们可以不给他加name属性,传递到服务器的数据如果没有name,则无法获取它的值。

    GET方式的特点

    (1);GET方式不能提交敏感数据  如:密码

    (2);GET方式只能提交少量数据,因为数据栏中不能存放太多数据

    (3);不能传递附件

    2.   POST传递的方式

            POST提交方式不是将数据追加到地址上,而是直接传给表单处理程序

            POST传递方式特点

                   (1);相对安全

                   (2);可以传递海量数据

                   (3);可以上传附件

    6. 文本组件

    l  语法格式 :<input  type=”组件类型” 属性=“值” />

    l  常用属性

      n  name :组件的名字,命名规则:可以包含字母,数字,下划线,只能以字母开头

      n  type:表单元素的类型

      n  value:组件中的值,该值将发往服务器

      n  size :文本框的长度,单位:字符

      n  maxlength :文本框最多可以输入多少个字符

      n  readonly :只读属性,可以选中,但无法修改 如:readonly = “readonly”

      n  disabled :禁用属性,不能选中,也无法被修改 如:disabled=”disabled”

    (1)单行文本域

    组件类型:txet

    特点:无法换行

    (2)单行密码框

        组件类型:password

    特点:输入的内容以密文显示

    (3)单选按钮

           组件类型:radio

           特殊属性:checked:默认值选项 如:checked=”checked”

    注意:一组单选按钮中只能选择一个,但name的值必须一致,一组的单选按钮name的值一致

    (4)复选框

    组件类型:checkbox

           特殊属性:checked:默认值选项 如:checked=”checked

     

    注意:复选框也是一组选项,因此name的值也得一致,使用数组来获取多个同名name的值

    (5)上传文件域

           组件类型:file

           属性:value:表单元素的值,这个值其实就是上传的文件名,value属性是只读属性,内容是手动上传的文件,而不能用户自己制定一个路径,为了安全起见value只能是只读的。

           注意:现在只能实现上传文件框,不能实现真正的上传。上传功能需要用PHP实现

     

    (6)隐藏域

    组件类型:hidden

    属性: name value

    功能:看不见的一个框,就是为了传递一些值,而且不想让别人看见

    用处:PHP后台程序 如:修改某一个新闻的ID号

    7.下拉列表

     <select name=”名称”>

            <option value =”标签1”>标签1</option>

        <option value =”标签2”>标签2</option>

        <option value =”标签3”>标签3</option>

    </select>

    <select>的属性 name

    <potion>属性 :value :传回数据库的值 ,selected 属性:默认选中 如selected=”selected”

    8.文本区域

    <textarea  name=”名称” cols=””宽度  rows=“高度”></textarea>

    常用属性

    l  name :元素名称

    l  cols: 宽度,单位:字符

    l  rows :高度   单位:字符

    提示;<textarea>和</textarea>之间是默认内容

    9.按钮

    l  提交按钮  <input  type=”submit” value=”提交”/>

    l  重置按钮  <input  type=”reset” balue=”重置”/>

    l  图片按钮  <inout  type=”image”src=”路径”/> 默认功能就是提交表单

    l  普通按钮  <input  type=”button”value=”按钮标签”>

      n  普通按钮没有任何作用,一般要通过和JS的代码配合使用

    10.上传

    格式:<input  type=”file” 属性>

    11.表格标题

    格式:<caption>标题</caption>

    提示:<caption>标记是<table>的子标记,<caption>标记放在<table>标记开始之后

  • 相关阅读:
    记录一下
    Fiddler对谷歌浏览器抓包
    Linux环境部署基本步骤
    JS----this && JS继承
    节流与防抖
    JS---call apply bind的区别&&JS---argument
    浏览器输入url之后到最后网页渲染出来经历了什么
    Bom中的方法
    JS----new和object.create的区别
    有关排序
  • 原文地址:https://www.cnblogs.com/tangwanzun/p/5845310.html
Copyright © 2020-2023  润新知