【HTML】HTML表单8.2(表单标签2)

目录

接上期,大致实现效果

文章简要

注释:这一次介绍的很多效果需要后期与服务器配合,但我们这里先只介绍效果

①提交按钮

②获取验证码

③上传文件

④还原所有表单内容

⑤下拉表单

⑥文字域


接上期,大致实现效果

文章简要

注释:这一次介绍的很多效果需要后期与服务器配合,但我们这里先只介绍效果

①提交按钮

②获取验证码

③上传文件

④还原所有表单内容

⑤下拉表单

⑥文字域

①提交按钮

html 复制代码
<input type="submit"/>

》》这里一般是会传给服务器,但这里我们先不讨论

效果

②获取验证码

html 复制代码
<input type="button" value="提交验证码" />

效果

》》这里一般是后期与js搭配使用,但这里我们先不讨论

③上传文件

html 复制代码
<input type="file"/>

效果

》》这里一般是会传给服务器,但这里我们先不讨论

④还原所有表单内容

html 复制代码
<input type="reset" value="点我全部恢复" />

效果

这个不用结合服务器,是真的可以全部恢复

⑤下拉表单

html 复制代码
年<select>
					<option>2005</option>
					<option>2004</option>
					<option>2003</option>
					<option>2002</option>
					<option>2001</option>
					<option>2000</option>
				</select>
				月<select>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					<option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
				</select>

这个需要搞一些介绍了

<select></select>双标签中的<option></option>中包含的就是下拉时所展示的元素们

效果

⑥文字域

html 复制代码
<textarea rows="5" cols="50">
				说吧孩子
			</textarea><

介绍(不常用):

rows表示行数,cols表示列数

行数不够了会自动加

<textarea>中的内容是文字区域中一开始就会有的内容

效果

今天的分享就结束啦~希望对您有帮助!!

相关推荐
3秒一个大几秒前
HTML5 敲击乐应用:从代码到交互的完整实现
html
环信3 分钟前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua3 分钟前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
海云前端14 分钟前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端
技术小丁20 分钟前
使用 HTML + JavaScript 实现酒店订房日期选择器(附完整源码)
前端·javascript
hashiqimiya21 分钟前
harmonyos的鸿蒙的跳转页面的部署
开发语言·前端·javascript
向日葵同志4433031 分钟前
使用@univerjs纯前端渲染excel, 显示图片、链接、样式
前端·react.js·excel
闭着眼睛学算法38 分钟前
【双机位A卷】华为OD笔试之【排序】双机位A-银行插队【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
可别39043 分钟前
使用Worker打包报错
前端·vue.js
Drift_Dream43 分钟前
深入浅出 requestAnimationFrame:让动画更流畅的利器
javascript