HTML-表单

原创
2015/11/28 15:35
阅读数 114

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













































展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部