html基础必备-表单标记,前端小白一看就会
zhezhongyun 2024-12-03 19:56 38 浏览
表单
表单允许我们发送和接收来自web页面的数据,表单的用途有:网站和论坛登录;注册信息;基于web的电子邮件;在线问卷调查等。
表单 - <form> ... </form>
所有表单元素(如输入框和按钮)必须位于表单标记内。在大多数情况下,表单必须设置name、action属性。
- name=“?” - 标识表单的唯一名称,由操作脚本使用。
- action=“url” - 提交时处理表单数据的脚本的地址(url)。在某些情况下,不需要操作URL,而是由web页面的JavaScript函数处理表单数据。
- method=“?” - 向操作脚本传送数据时使用的请求方法,post或get。例如,post用于提交用户注册的表单数据,get用于搜索或必须取得返回信息的表单。
输入字段 - <input>
用于为表单创建简单的文本输入字段,但也是许多其他表单输入类型的基础,使用type属性来指定不同类型。
- name=“?” - 输入字段被操作脚本使用时使用的唯一名称。
- type=“?” - 输入字段有几种类型,文本text、密码password、复选框checkbox、单选框radio、文件file、图像image、隐藏hidden都是最常见的。
- value=“?” - 输入字段在首次加载时显示的初始值或数据。
- size=“?” - 输入字段的大小或宽度,通常以数字字符宽度而不是像素定义。
- maxlength=“?” - 输入字段的最大长度,例如输入的最大字符数。
- checked - 与复选框类型和单选框类型一起使用,默认设置为已选中。
按钮 - <button>
按钮与表单输入字段类似,但有自己的一组属性:
- name=“?” - 按钮中操作脚本中的唯一名称。
- type=“?” - 按钮类型(submit或reset),提交submit还是重置reset。
- value=“?” - 按钮上显示的文本,例如“确定”或“提交”。
- size=“?” - 按钮的长度(或宽度)。
选择列表 - <select> ... </select>
下拉列表,也称为组合框,允许从项目列表中进行选择。
- name=“?” - 选择列表的名称
- size=“?”-选择列表的最小宽度,通常不需要,因为列表项的大小决定列表大小。
- multiple - 允许用户从列表中选择多个项目,默认为选。
选择项 - <option> </option>
option标记定义选择列表中的每一项,并且必须出现在select标记中。选择项的文本必须出现在选项标记之间。
- value=“?” - 该值是在选择项被选中的情况下发送到操作脚本的数据。注意,这不是在列表中显示的文本
- selected - 设置选择列表显示时的默认选项。
- 文本区域 - <textarea></textarea>
- 文本区域允许输入大量文本,并允许指定输入框的高度与,不像input标记只能有固定高度。
- name=“?” - 文本区域的唯一名称。
- rows=“?”-文本区域行数,定义文本区域的垂直大小。
- cols=“?”-文本区域水平大小,即列数,定义为字符数。
例子
浏览器显示的内容如下所示:
- 上一篇:html-超文本标记语言
- 下一篇:HTML知识点!赶紧码住
相关推荐
- VRay材质 VRayALSurfaceMtl(VRay材质库下载)
-
本期给大家提供V-RayalSurface材质的详细信息。V-RayALSurfaceshader是V-Ray对AndersLangland的alShader的实现,它被设计用来重现皮肤的外...
- JavaScript 强制回流问题及优化方案
-
JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow),导致主线程被阻塞。回流(Reflow)是浏览器重新计算页面元素布局的过程(如位置、大小等),属于高开销操作。频繁或同...
- 前端每日一读,大厂面试无忧:网络与安全—浏览器渲染流程、重排
-
哈咯~大家好~又是美好的一天,前端小菜鸟上线啦,为大家带来今天的“前端每日一读,大厂面试无忧”——浏览器渲染流程,重排、重绘,以及如何避免重排和重绘浏览器的渲染流程是一个包含多个步骤的复杂过程,主...
- 移动端浏览器性能优化探索(主流移动端浏览器的开发模式和特性)
-
鲁田(程禄)大淘宝技术2023-05-2416:20发表于浙江在移动端的页面开发过程中,我们经常提及页面性能优化、消除页面卡顿的话题,如何·确定优化策略,我们首先应当对页面卡顿的行为有所认知...
- 大厂都在用的10个css高级技巧,我敢说你最多用过3个!不服来辩!
-
1.clamp()函数:流体布局神器应用场景:苹果官网响应式字号、淘宝商品卡片宽度自适应。代码案例:<style>.clamp-text{font-size:clamp(1...
- Qt Quick模块之Item(qt item model)
-
QtQuick模块简介QtQuick模块作为一个编写QML应用程序的标准库,提供了用于创建用户界面的所有基本类型,使用这些类型可以创建动态可视化组件、接收用户输入、创建数据模型和视图。QtQu...
- 零基础教你学前端——44、矩形、圆形和椭圆形
-
使用SVG绘制矩形、圆形和椭圆形。SVG有一些预定义的形状元素,可以供开发者使用。这些元素分别是矩形、圆形circle、椭圆ellipse、线条line、多线条polyline、多边形po...
- Three.JS教程5 threejs中的材质(threejs自定义材质)
-
Three.js中的材质(Material)是实现引人注目的3D效果的关键组件之一。本篇博客中,我们将深入探讨Three.js中的材质类型、属性和用法。一、什么是Three.js材质?在Three.j...
- WinForm开发是如何美化表单?这个小控件意外好用
-
点击“了解更多”获取DevExpressv20.2完整版下载DevExpressskins和LookAndFeelandSkinning技术只能应用于DevExpress控件,为了在整个应...
- 前端开发必备!Swiper 轮播与 Lightbox 灯箱组件深度解析
-
在互联网产品不断迭代升级的今天,用户对于页面交互和视觉效果的要求越来越高。想要快速打造出吸睛又实用的项目,合适的组件必不可少。今天就为大家推荐两款超好用的组件——Swiper轮播组件和Light...
- 「网络安全」常见攻击篇(20)——点击劫持
-
什么是点击劫持?点击劫持(Clickjacking)技术又称为界面伪装攻击(UIredressattack),是一种视觉上的欺骗手段。通常有两种方式:攻击者使用一个透明的iframe,覆盖...
- QML属性大总结(qml 默认属性)
-
一、公共属性QML里的各个可视化对象均继承与Item类,因此公共属性也就是Item的属性注意:Item本身是不可视化的1、标识符:id功能:标识对象,方便引用特点:必须唯一(可省略非必需),不然使用的...
- 原来隐藏一个DOM元素可以有这么多种方式,最后一种你肯定不知道
-
我们在日常编码的时候,隐藏一个dom元素有很多种方式,今天我们来盘点一下隐藏dom元素有哪些方式,最后一种,你绝对没有用过。display:none作为经常用来隐藏元素的css属性,di...
- 10个案例详解AnimatableExtend装饰器定义可动画属性
-
Hello,大家好,我是V哥。HarmonyOSNEXT开发中,使用@AnimatableExtend装饰器来定义可动画属性是个很好玩的事情,废话不多说,马上进入主题,先来看一下基本语法,接着...
- 不看必后悔!15个三星GoodLock隐藏小技巧~(上)
-
很多刚用三星手机的星粉们,一定对三星GoodLock这个宝藏App还不是很了解,今天就带大家一起详细去看看GoodLock这个大家族究竟有多少宝藏功能及成员呢?让我们一起来看看吧~由于Good...
- 一周热门
- 最近发表
-
- VRay材质 VRayALSurfaceMtl(VRay材质库下载)
- JavaScript 强制回流问题及优化方案
- 前端每日一读,大厂面试无忧:网络与安全—浏览器渲染流程、重排
- 移动端浏览器性能优化探索(主流移动端浏览器的开发模式和特性)
- 大厂都在用的10个css高级技巧,我敢说你最多用过3个!不服来辩!
- Qt Quick模块之Item(qt item model)
- 零基础教你学前端——44、矩形、圆形和椭圆形
- Three.JS教程5 threejs中的材质(threejs自定义材质)
- WinForm开发是如何美化表单?这个小控件意外好用
- 前端开发必备!Swiper 轮播与 Lightbox 灯箱组件深度解析
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)