资讯专栏INFORMATION COLUMN

HTML第三章:表单

tanglijun / 1340人阅读

摘要:第三章表单表单标签相当于一张记录用户信息的单子常用属性表单的提交方式,常用的值有两个安全提交方式非安全提交方式举例设置表单提交到哪举例提交到的页面地址表单中包含表单元素标签,用来让用户输入内容需要注意表单元素要写在标签之间,不要写在外面常用

第三章:表单

表单标签form:

//相当于一张记录用户信息的单子
    常用属性:method:表单的提交方式,常用的值有两个
                   (1)post:安全提交方式
                   (2)get:非安全提交方式
    举例:

 
                     action:设置表单提交到哪
    举例:


表单中包含表单元素inout标签,用来让用户输入内容
需要注意表单元素要写在form标签之间,不要写在form外面

常用的表单元素:
   (1):文本框,可以输入内容
            表单元素还可以设置默认值value属性:value="123"


   (2) :密码框,输入的内容会隐藏
            每个表单元素一定要设置name属性,name属性用来标识表单元素的名字


   (3):提交按钮,点击后会提交表单
            表单元素通过type设置是什么类型的输入框或按钮


   (4):重置按钮, 点击会让表单中的输入框回到初始状态


   (5):单选按钮,
            同一组单选按钮只能选择一个,使用name来分组,比如性别:name都是sex,如果name值不同,说明不是同组。提交的时候提交的是value值,

   (6) 多选框,使用name分组,可以多选,提交的时候提交的是value值

            ps: 单选按钮和多选按钮可以通过设置checked属性来设置默认选中项

 

   (7)
           列表框,通过下拉框选择列表项,提交的时候提交的是value值, 通过设置列表项的selected属性来设置默认选中项

   (8)图片按钮
      让按钮变成图片的样子,点击会提交表单


   (9)普通按钮
      一个没有任何作用的按钮,以后会很常用
      注意:不设置type属性的话,默认type属性为text


   (10)文本域,可以显示多行内容或者输入

   (11)文件域,可以选择一个文件上传
       上传文件还需要设置form标签中的enctype属性为multipary/form-data.


   (12)邮箱框,必须输入一个正确的邮箱格式才可以提交表单
       错误会有提示

   (13)网址框,必须输入一个完整的网址,列如:http://www.baidu.com
   
   (14)数字框,只能输入数字,
       输入其他字符就提交不了表单。
   
   (15)滑块,可以左右滑动
 
   (16)搜索框,不同浏览器会有你不同的样式显示

   (17)可以选择颜色

   (18)格式为时间格式的输入框


表单初级验证:placehoder提示内容,require非空判断
                         pattern正则表达式验证
         栗子:
                   //这个输入框提交时不能为空
 

表单的高级应用:
       隐藏域:
                  隐藏域是用户看不到的内容,可以用来区分表单,


       只读:
                  设置只读属性之后,输入框内容不能被更改
                  但是会获取光标,也可以被选中


       禁用:
                  设置禁用属性之后,元素不能使用,变灰不能获取光标,不可选中


      表单标注:点击文字时,相对应的表单元素获取焦点,增强鼠标的可用性
             栗子:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1978.html

相关文章

  • html标签简介(常用)

    摘要:比如等行内标签可以多个标签共同占用一行的标签。标准模式,浏览器使用的标准解析渲染页面。显示结果这个文本包含下标文本。表单提交项的值。表单还可以包含和标签。html常识 什么是HTML htyper text markup language  即超文本标记语言 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 标记语言: 标记(标签)构成的语言. 网页==HTML文...

    Travis 评论0 收藏0
  • html5系列:form 2.0 新表单属性

    摘要:属性适用于标签相当于全局,以及以下类型的标签以及。类型属性,规定某个表单元素为必填项,主要用于表单检验。与表单检验相关,填入正则表达式。 首先必须提到,html5对boolean类型的标签属性更倾向于使用html 4.01时代的传统段语法形式,即只有属性名而没有属性值,例如: html5有不少新的表单属性,仅列出一些比较重要的: autocomplete 这个属性用来开启或关闭表单...

    asce1885 评论0 收藏0
  • HTMl基础

    摘要:每个表格均有若干行由标签定义,每行被分割为若干单元格由标签定义。字母指表格数据,即数据单元格的内容。数据单元格可以包含文本图片列表段落表单水平线表格等等。表格最重要的目的是显示表格类数据。规定在提交表单时所用的方法默认。 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STRE...

    番茄西红柿 评论0 收藏0
  • HTML知识梳理(笔记)

    摘要:标签位于文档的头部,不包含任何内容。这其中包括标签中的。参考链接默认样式问题处理浏览器的默认样式。让浏览器知道元素的合法性。属于,是进行严格化的结果。机器容易理解结构搜索读屏软件有助于优化。是中的,是可以通过进行更改的,是活的。 HTML常见元素 showImg(https://segmentfault.com/img/bVbdnq2?w=861&h=365); meta 定义和用法 ...

    amc 评论0 收藏0
  • form表单那点事儿(下) 进阶篇

    摘要:在表单提交时,浏览器会自动进行一系列的校验工作,没有通过校验的表单是无法提交到服务器的。而方法提交表单,会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时,会触发事件。 上一篇主要温习了一下form表单的属性和表单元素,这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单,免不了会有取值赋值操作,比如有以下表单: ...

    Java_oldboy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<