【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>中的内容是文字区域中一开始就会有的内容

效果

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

相关推荐
zwjapple13 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
AA-代码批发V哥2 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python