HTML表单元素、表单控件
HTML表单元素、表单控件
HTML工作原理
HTML是部署在服务器上的文本文件根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML浏览器解释执行HTML，从而显示出内容
HTML部署在服务器上，运行在浏览器上
表单
表单用于显示、收集信息，并提交信息到服务器
表单二要素：
- （1）表单元素
- （2）表单控件——
<input>元素中的，各个type属性值
| 表单元素 | 表单控件 |
|---|---|
| input | text——文本框 |
| label——管理表单中的文本 | password——密码框 |
| select——下拉选 | radio——单选按钮 |
| textarea——文本域 | checkbox——多选按钮 |
| - | hidden——隐藏文本域 |
| - | file——文件上传组件 |
| - | submit——提交按钮 |
| - | reset——重置按钮 |
| - | button——普通按钮 |
| 新增表单控件 |
|---|
| url |
| search——此类型表示输入的将是一个搜索关键字 |
| number / range——不同的数字输入模式 |
| color——让用户通过颜色选择器选择一个颜色值，并反馈到value中 |
| date——日期和时间选择器 |
表单就是从浏览器向服务器传输数据的手段
定义表单:使用成对的
<form></form>标记，表示要将此元素中所涵盖的控件中的数据传输给服务器主要属性：
（1）action:表单提交的URL
（2）method:指出表单数据提交的方式
（3）enctype:表单数据进行编码的方式
input元素 ：他们之间用type属性区分。
- 1、文本框：
<input type="text"/> - 2、密码框：
<input type="password"/>
主要属性：
（a）value属性：由访问者自由输入的任何文本
（b）maxlength属性：限制输入的字符数
（c）readonly属性：设置文本控件只读
（d）name属性：当提交form时，name作为元素标识被发送到服务器 - 3、单选框：
<input type="radio"/> - 4、复选框：
<input type="checkbox"/>
主要属性
（a）value：文本，当提交form时，如果选中了此按钮，那么value就被发送到服务器
（b）name：用于实现分组，一组单选框或者复选框的名称必须相同
（c）checked：设置选中
（d）id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。id属性与<label></label>标签配合，可用于使选项后的文字可被点击来选中选项。
效果：
- 5、隐藏域：
<input type="hidden"/>
在表单中包含不希望用户看见的信息 - 6、文件选择框：
<input type="file"/>
选择要上传的文件
- 7、提交按钮：
<input type="submit"/>
传送表单数据给服务器端或其它程序处理 - 8、重置按钮：
<input type="reset"/>
清空表单的内容并把所有表单控件设置为最初的默认值 - 9、普通按钮：
<input type="button"/>
用于执行客户端脚本，没有任何功能，需通过js定义功能。
主要属性：
value:按钮的名字
其他元素（3个）；
1、<label>： 用来管理表单中的文本，可以将文本与控件绑定在一起，从而增加了控件的受力面积。
语法：<label for="控件ID">文本</label>
主要属性:
- for:设置该文本所关联的控件ID，关联后点击标签等同于点
击控件
id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。
- 2、
<select>： 下拉选
selected：默认选中
- 3、
<textarea>：文本域
相当于多行文本框
语法：
<textarea>文本</textarea>
主要属性：
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读
HTML表单元素、表单控件相关推荐
- ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
前言 本以为可以稳稳当当的工作.安安心心的写文章,结果我做了一件非常疯狂的事情,换新工作一周后辞了--然后去了另外一家公司 - - #,理由就不详说了,总之现在是每天加班到8-9点,虽然如此但是这个团 ...
- ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
前言 ExtJS接触至今已有4个月(5.1 - 9.1),小有心得,由于公司短期内并没有打算采用,所以备忘之以备他日之需.虽然网上资料不少,但学起来仍感费劲,所以还是想以自己的方式来与众分享. 系列 ...
- Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
- 学习笔记（五）——数据适配器、数据表、数据网格视图控件的综合应用。
学习笔记(五)--数据适配器.数据表.数据网格视图控件的综合应用. 1. 批量修改 修改包括增加,删除以及更新3个操作,所以声明实力化3个SQL命令分别应用于插入,删除以及修改 将声明的SQL命令连 ...
- 64位 regsrv win10_Win10手动注册注册表提示regsvr32加载控件失败解决方案
regsvr32加载控件失败怎么办?当我们在使用计算机时,有时候会发现有些注册表没有注册,需要手动进行注册,但是在cmd命令中,输入命令regsvr32 xx.dll,运行提示模块数据加载失败,这怎么 ...
- Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决
Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决 参考文章: (1)Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决 (2)https://www. ...
- selenium Element is not clickable because another element obscures it — 点击被页面上其他元素遮住的控件，亲试有效！！！
点击被页面上其他元素遮住的控件 使用WebDriver点击界面上Button元素时,如果当前Button元素被界面上其他元素遮住了, 或没出现在界面中(比如Button在页面底部,但是屏幕只能显示页面 ...
- video 元素自定义 controls 控件以及常用事件、方法
video 元素自定义 controls 控件以及常用事件 属性参考 隐藏控件 隐藏播放器右下角三个点 自定义播放速度 阻止默认的全屏和暂停 自定义全屏播放 常用事件 常用属性和方法 <vide ...
- php怎么引用表单元素,表单元素：最全的各种html表单元素获取和使用方法总结...
表单是网页与用户的交互工具,由一个 元素作为容器构成,封装其他任何数量的表单控件,还有其他任何元素里可用的标签,表单能够包含.....等表单控件元素.表单元素有哪些呢?它包含了如下的这些元素,输入文本 ...
- Android自己定义控件2-简单的写字板控件
概述 上一篇文章我们对自己定义控件进行了一个大体的知识介绍. 今天就来学习自己定义一个简单的写字板控件. 先来看看效果图 就是简单的依据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了androi ...
最新文章
- 用bho方式拦截中国电信流氓广告
- rust腐竹是什么意思_学习Rust 集合与字符串
- 2019北妈和你：活着就意味必须要做点什么，请好好努力
- linux mysql 备份脚本_linux下mysql备份脚本
- linux 访问windows 共享文件
- Android Thing专题5 I2C
- centos 环境变量_Centos7：Linux环境变量配置文件
- 动态数据源四种实现方案对比
- oss 私有云访问 获取临时图片地址
- Joiner拼接String
- cdr怎么做文字路径_CorelDRAW如何制作环绕圆形的路径文字
- 最适合晚上睡不着看的 7 个网站，建议收藏哦
- ref修改dom样式遇到的问题
- java如何实现动态时钟_Java实现动态数字时钟
- 【FCC前端教程】28关学会HTML与HTML5基础
- 解决：input框当type为number时maxlength失效
- 机器学习 （一） 基础概念
- 计算机 无法进入pe,无法进入老毛桃pe系统解决办法[推荐]
- 基于python的Django框架购物商城设计与实现毕业设计毕设参考
- CSS 背景鼠标滑过，提示文字