一、表单控件

文章目录

一、表单控件

1.1 认识表单

1.2 input控件

1.2.1 文本框与密码框

1.2.2 单选框和复选框

1.2.3 默认选中表单属性

1.2.4 input按钮组

1.2.5 最对字符数和文本值

1.2.6 label标签

1.2.7 textarea控件(文本域)

1.2.8 下拉菜单

二、表单域

1.1 认识表单

表单控件:包含了具体的表单功能项,如但行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

提示信息:一个表单中通常包含一些说明性文字,提示用户进行填写和操作

表单域:相当于一个容器,用来容纳所有的表单空间和提示信息,可以通过它定义处理表单数据所有的程序的url地址,

以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传输到后台服务器

1.2 input控件

是一个单标签,type属性为其最基本的属性,其取值有很多种,用于指定不同的控件类型。除了type属性之外,标签还有其他很多种属性,常用的属性如下表所示:

属性

属性值

描述

type

text

单行文本输入框

type

password

密码输入框

type

radio

单选框

type

checkbox

复选框

type

button

普通按钮

type

submit

提交按钮

type

reset

重置按钮

type

image

图片形式的提交按钮

type

file

文件域

name

用户自定义名字

控件的名称

value

用户自定义

input控件中默认的文本值

size

正整数

input控件在页面中显示的宽度

checked

checked

定义选择控件时默认选中的项

maxlength

正整数

控件允许输入的最多字符的个数

1.2.1 文本框与密码框

用户名: p>

密 码:p>

1.2.2 单选框和复选框

性 别:女

p>

爱好:

篮球

足球

排球

p>

1.2.3 默认选中表单属性

checked="checked" 默认选中属性

1.2.4 input按钮组

上传头像:

1.2.5 最对字符数和文本值

密码:p>

1.2.6 label标签

作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会或得输入焦点

如何绑定元素:for属性规定label标签与那个表单元素绑定

1、

输入账号:label>

2、

输入账号:label>

1.2.7 textarea控件(文本域)

需要输入大量的信息,就需要使用到控件,通过该控件可以轻松的创建多行文本输入框,使用方式如下:

输入的文本内容textarea>

1.2.8 下拉菜单

使用select控件定义下拉菜单的基本语法如下:

四川

重庆

贵州

上海

注意事项:

1、标签至少包含一对

2、在option中定义 selected=“selected” 时,当前项即为默认选中项

二、表单域

作用:收集表单信息,并且提交给服务器;表单域是看不见的

用户名:p>

密码:p>

p>

p>

form>

常用属性:

action 在表单收集到信息后,需要将信息提交到服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址

method 用于设置表单提交数据的方式,取值为get或者是post。get提交会明文显示在地址栏,建议用post方式提交

name 用于指定表单的名称,以区分同一个页面的不同表单

html5表单域,html5表单控件和表单域相关推荐

  1. 表单和表单控件以及表单域详解

    表单域:存放表单的区域.把表单控件里面的信息全部收集提交. 表单控件 input表单控件: 1.是个单标签 </input> 2.input可以通过type(类型)属性来变换形状 单选按钮 ...

  2. HTML基本语法之表单标签:表单的组成 ,表单域,表单控件元素(表单元素) ,input表单元素, label标签, 表单控件(表单元素), select表单元素, textarea表单元素

    文章目录 表单标签 表单的组成 表单域 常用属性: 表单控件元素(表单元素) input表单元素 label标签 表单控件(表单元素) select表单元素 textarea表单元素 表单元素几个总结 ...

  3. autojs遍历当前页面所有控件_HTML5表单和表单控件的使用

    哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...

  4. 第三章 用检验控件执行表单的验证

    第三章 用检验控件执行表单的检验 主要内容: l 使用客户端检验 l 必填域控件:RequiredFieldValidator l 检验表达式控件:RegularExpressionValidator ...

  5. html中完整表单控件,HTML表单和表单控件

    表单标签(掌握) 表单目的是为了收集用户信息. 在网页中,我们也需要跟用户进行交互,收集用户资料,这时就需要表单. 在HTML中,一个完整的表单通常由表单控件(也叫表单元素),提示信息和表单域3个部分 ...

  6. JS使用Lodop控件打印表单和二维码

    有关Lodop的查询可看文章:Lodop打印条码二维码设置多宽不一定是多宽 一.了解Lodop 1.1Lodop的定义 Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内 ...

  7. web元件库、axure元件库、元件库、web组件、控件、表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴

    web元件库.axure元件库.通用元件库.web组件.控件.表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴. ...

  8. Qt 常用控件样式表及遇到的问题

    Qt界面美化常用到样式表,用好样式表能达到不一样的效果. 样式表用法 常用控件样式表用法如下: /**********子界面背景**********/ QWidget#customWidget {ba ...

  9. 时间表、行程安排表以及日历日程的SilverLight控件MindFusion.Scheduling

    MindFusion.Scheduling for Silverlight 控件结合了丰富的时间管理功能并且具有绚丽的界面,是一款理想的用于创建所有类型的时间表.行程安排表以及日历日程的SilverL ...

最新文章

  1. 根据传入坐标和图片URL地址对图片进行切图操作、将图片转化成Base64位码
  2. [python学习] 简单爬取图片网站图库中图片
  3. 一步一步教你抓数据——用.net精确提取网站数据的通用方法 [转]
  4. 实验3 --俄罗斯方块 with 20135335郝爽
  5. 超棒的视差滚动效果javascript类库 - Jarallax
  6. oracle+semijoin,Semi join 与anti join
  7. 数据库无响应(hang住)故障处理思路和方法
  8. java环境配置指南
  9. 【手册】Linux User's Manual
  10. 卡塔编程_量子卡塔教您如何在Q#中进行量子编程
  11. 关键字查询输入%问题
  12. unity 2022大三期末大作业 3D立体魔方游戏(附下载链接)
  13. 怎样修改word页面页码
  14. virtualBox上Ubuntu的网络设置(万能方法)
  15. MATLAB根据经纬度格网数据画地图
  16. Shell/猛犸推送消息给钉钉机器人
  17. B站高性能微服务架构
  18. 文本数据的词云可视化
  19. kafka的Rebalance问题分析(续)
  20. 超超超 简单构造者模式

热门文章

  1. c++练习--hotdog
  2. 打造最强浏览器之你真的会用浏览器吗?
  3. 甲骨文云数据库与集成系统创新技术日会议资料
  4. 权利人的变更费用是多少?
  5. 深度学习论文: Task-Specific Context Decoupling for Object Detection及其PyTorch实现
  6. 免费虎年限定红包封面,送你最后一个bug~
  7. 如何买开盘即涨停的个股
  8. MOOG穆格伺服阀D634-371C
  9. HTML5系列代码:制作普通链接的主页
  10. 深入分析微软Microsoft Azure 机器学习工作室案例