HTML中的表单

HTML表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),

首先应该用标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入,

具体实现及注释可参照以下伪代码:

<!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
<p><label>姓名:</label><input type="text" name="username" />
</p><!-- input类型为password定义了一个密码输入框 -->
<p><label>密码:</label><input type="password" name="password" />
</p><!-- input类型为radio定义了单选框 -->
<p><label>性别:</label><label><input type="radio" name="gender" value="0" /> 男</label><label><input type="radio" name="gender" value="1" /> 女</label>
</p><!-- input类型为checkbox定义了单选框 -->
<p><label>爱好:</label><label><input type="checkbox" name="like" value="sing" /> 唱歌</label><label><input type="checkbox" name="like" value="run" /> 跑步</label><label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
</p><!-- input类型为file定义上传照片或文件等资源 -->
<p><label>照片:</label><input type="file" name="person_pic">
</p><!-- textarea定义多行文本输入 -->
<p><label>个人描述:</label><textarea name="about"></textarea>
</p><!-- select定义下拉列表选择 -->
<p>
<label>籍贯:</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select>
</p><!-- input类型为submit定义提交按钮还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:<input type="image" src="xxx.gif">
-->
<p><input type="submit" name="" value="提交"><!-- input类型为reset定义重置按钮 --><input type="reset" name="" value="重置">
</p>
input表单项中的属性,可以提供
*type属性:表示表单项的类型:值如下:text:单行文本框password:密码输入框checkbox:多选框 注意要提供value值radio:单选框 注意要提供value值file:文件上传选择框button:普通按钮submit:提交按钮image:图片提交按钮reset:重置按钮, 还原到开始\(第一次打开时\)的效果hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改*name属性:表单项名,用于存储内容值的*value属性:输入的值\(默认指定值\)size属性:输入框的宽度值maxlength属性:输入框的输入内容的最大长度readonly属性:对输入框只读属性*disabled属性:禁用属性*checked属性:对选择框指定默认选项src和alt是为图片按钮设置的注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空image图片按钮,默认具有提交表单功能。placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。该提示会在用户输入值之前显示在输入字段中。注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20169210 2016-2017-2《网络攻防实践》第八周总结

教材 一、Linux操作系统基本矿建概述 1、Linux操作系统发展与现状 跨平台的硬件支持&#xff1b;丰富的软件支持&#xff1b;多用户多任务&#xff1b;可靠的安全性&#xff1b;良好的稳定性&#xff1b;完善的网络功能2、Linux系统结构 1&#xff09;Linux进程与线程管理机制2…

cad卸载_想重新安装CAD提示已经安装?不会卸载?进来教你卸载CAD

大家好&#xff0c;我是【小杰趣分享】&#xff0c;这里每天都会分享一下和电脑软件、电脑硬件相关的文章或视频。这一期小杰教大家怎么彻底卸载CAD&#xff01;CAD这款软件是小杰见过最难卸载的软件了&#xff0c;不知道你们有没有遇到过卸载CAD想重新安装&#xff0c;却怎么都…

直击3.15 安防行业如何维护消费者权益

一年一度的315维权活动让众多行业为之惶恐&#xff0c;安防行业发展至今&#xff0c;和各行各业一样也同样面临着安防市场粗制滥造、假冒伪劣产品盛行的局面。 315今年的消费维权主题是 “网络诚信 消费无忧”&#xff0c;中国消费者协会副秘书长董祝礼表示&#xff0c;网络消费…

RBSP、SODB、EBSP三者的区别和联系 SPS: sequence parameter sets

SODB&#xff1a;最原始的编码数据&#xff0c;没有任何附加数据 RBSP&#xff1a;在 SODB 的基础上加了rbsp_stop_ont_bit&#xff08;bit 值为 1&#xff09;并用 0 按字节补位对齐EBSP&#xff1a;在 RBSP 的基础上增加了防止伪起始码字节&#xff08;0X03&#xff09; SPS:…

【Python基础入门系列】第04天:Python 流程控制

在编程的世界中&#xff0c;流程控制是程序员运行的基础&#xff0c;流程控制决定了程序按照什么样的方式去执行&#xff0c;本节给大家介绍 Python 流程控制相关语法。 if 语句 if 语句表示如何发生什么样的条件&#xff0c;执行什么样的逻辑。 Python程序语言指定任何非0和…

UGLY NUMBERS II

不去重错误版 17.4.23 long isMin (long a, long b) { if (a > b) a b; return a;}long nthUglyNumber(long n) { long *l (long*)malloc(n*sizeof(long)); for (long i 0; i < n; i) l[i] 0; l[0] 1; long p2, p3, p5 0; for(long i 0; i < n - 1; i) { l[i …

excel合并两列内容_还在为合并WPS表格(Excel)中两列内容而犯愁?此方法简单高效...

我们在处理WPS表格(Excel)数据时&#xff0c;时常需要将两列甚至更多列的内容合并显示在同一列中&#xff0c;就像这样&#xff1a;这个时候大家是怎么解决的呢&#xff1f;路人&#xff1a;复制粘贴So easy&#xff01;小杜&#xff1a;不止两三行啊……路人&#xff1a;复制粘…

Css基本语法及页面引用

Css基本语法及页面引用 CSS代码出现在三个地方 </head><body><b style....>兄弟连</b> <!-- 1. 行内样式,内联样式, 作为 style属性值 --></body>css基本语法 css的定义方法是&#xff1a; 选择器 { 属性:值; 属性:值; 属性:值;} 选…

【Python基础入门系列】第05天:Python函数

前面我们写过九九乘法表&#xff0c;但如果我要七七乘法表或五五乘法表的话&#xff0c;你会看到三者代码极其类似&#xff0c;只是循环变量不同&#xff0c;那么如何做到代码重用&#xff0c;而不是简单拷贝黏贴修改呢&#xff0c;其实可是使用函数完成这一功能! 先来试着看一…

【Java基础】 JQuery的常用操作

jQuery的常用操作一、隐藏显示对象id为test的元素的display修改成了“none”&#xff0c;即隐藏了id为test的元素&#xff1a;$(#test).css(display,none)或$(#test).style.display"none"我们经常用到的是切换一个元素的隐藏与现实&#xff0c;下面给出代码&#xff…

store_coding_state (cs_cm)的作用

// 以下是对当前宏块进行编码&#xff08;这里的编码主要目的是为了计算按当前组合方式编码// 生成码流的大小&#xff0c;因此编码前要保存当前编码状态&#xff0c;编码完成后必须恢复现场&#xff09;// S T O R E C O D I N G S T A T E //-----------------------…

第十五届北京师范大学程序设计竞赛决赛(网络同步赛) B lca水 D 思维,找规律...

第十五届北京师范大学程序设计竞赛决赛&#xff08;网络同步赛&#xff09; B. Borrow Classroom 题意&#xff1a;一棵树&#xff0c;点 1为根&#xff0c;一个人从点 b到 点 c再到点 1&#xff0c;第二个人从点 a出发&#xff0c;问第二个人能否截住第一个人。 tags&#xff…

macbook所有型号大全_苹果笔记本型号大全

很多朋友在选购苹果笔记本也就是MacBook的时候都会考虑究竟买哪一个系列会比较好&#xff0c;下面就为大家介绍一下苹果笔记本型号大全都有什么&#xff0c;希望以下的介绍能够帮助到您。苹果笔记本型号大全目前苹果笔记本有以下的几个主要的型号&#xff1a;1、MacBook Air是目…

【Python基础入门系列】第06天:Python 模块和包

在计算机程序的开发过程中&#xff0c;随着程序代码越写越多&#xff0c;在一个文件里代码就会越来越长&#xff0c;越来越不容易维护。 为了编写可维护的代码&#xff0c;我们把很多函数分组&#xff0c;分别放到不同的文件里&#xff0c;这样&#xff0c;每个文件包含的代码…

Css中的选择器

Css选择器 CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素. 用来选中 元素的 代码称为 选择器, 或 选择符. html元素是指, 标签与标签包裹内容的整体. 常用的选择器有如下几种&#xff1a; 1、标签选择器 标签选择器&#xff0c;此种选择器影响范围大…

福州联通与市政府携手 共筑新型智慧城市

“福州联通今年将投入专项资金&#xff0c;在福州市区建设NB-IoT网络&#xff0c;包括2000个载扇部署&#xff0c;建设一张覆盖完备、性能领先的窄带物联网。”据介绍&#xff0c;去年9月&#xff0c;福州联通与福州市政府正式签署《共同推进窄带物联网&#xff08;NB-IoT&…

流媒体技术的国内外动态

1、大规模流媒体应用中关键技术的研究 支持大规模用户在线使用的流媒体应用是Internet中极富潜力的一项“重磅级用”,但由于Internet缺乏服务质量(QoS)与相应的安全保障,并且网络和终端系统又存在着较大的异构性,这使得在Internet上构建支持大规模用户的在线流媒体应用面临很多…

空间直线与平面的交点

这内容属于计算几何&#xff0c;在 3D游戏开发编程基础 或者在游戏开发中的数学和物理算法 这种资料上也可以找到相关的内容和代码。或者更广泛点称为是计算机图形学&#xff0c; 接下来我们进入正题&#xff0c;如果直线不与平面平行&#xff0c;将存在交点。如下图所示&#…

iphone导出视频 无法连接到设备_拷贝iphone照片,显示无法连接设备?TRIZ 3秒钟解决...

手机存储满了&#xff0c;想把手机里面的照片和视频拷贝出来。 又不想交给苹果cloud的“苹果税”。USB手动连上IPHONE&#xff0c;结果每次复制了几百兆&#xff0c;就会弹出“无法连接设备”&#xff0c;导致拷贝失败。并且每次重新连接之后&#xff0c;删掉的照片又出现在手机…

【Python基础入门系列】第07天:Python 数据结构--序列

python内置序列类型最常见的是列表&#xff0c;元组和字符串。&#xff08;序列是python中最基础的数据结构&#xff0c;而数据结构是计算机存储&#xff0c;组织数据的方式。&#xff09; 另外还提供了字典和集合的数据结构&#xff0c;但他们属于无顺序的数据集合体&#xf…