【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
2023-06-13 09:18:07 时间
文章目录
一、按钮表单
1、普通按钮
将 <input /> 标签 的 type 属性设置为 button , 就可以将该 表单组件 设置为 普通按钮 类型表单 ;
通过 value 属性 可以设置 该 普通按钮 显示的 文本内容 ;
<input type="button" value="普通按钮">
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表单 -->
用户名 : <input type="text" value="请输入账号"/>
密 码 : <input type="password"/>
<br />
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="true"/>
<br />
<input type="button" value="普通按钮">
</body>
</html>
小时效果 :
2、提交按钮
将 <input /> 标签 的 type 属性设置为 submit , 就可以将该 表单组件 设置为 提交按钮 类型表单 ;
提交按钮 默认显示的文本信息是 " 提交 " , 通过 value 属性 可以设置 该 提交按钮 显示的 文本内容 ;
<input type="submit" />
<input type="submit" value="提交按钮"/>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表单 -->
用户名 : <input type="text" value="请输入账号"/>
密 码 : <input type="password"/>
<br />
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="true"/>
<br />
<input type="button" value="普通按钮">
<br />
<input type="submit" />
<input type="submit" value="提交按钮"/>
</body>
</html>
3、重置按钮
将 <input /> 标签 的 type 属性设置为 reset , 就可以将该 表单组件 设置为 重置按钮 类型表单 ;
提交按钮 默认显示的文本信息是 " 重置 " , 通过 value 属性 可以设置 该 重置按钮 显示的 文本内容 ;
<input type="reset" />
<input type="reset" value="重置按钮"/>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表单 -->
用户名 : <input type="text" value="请输入账号"/>
密 码 : <input type="password"/>
<br />
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="true"/>
<br />
<input type="button" value="普通按钮">
<br />
<input type="submit" />
<input type="submit" value="提交按钮"/>
<br />
<input type="reset" />
<input type="reset" value="重置按钮"/>
</body>
</html>
4、图片按钮
将 <input /> 标签 的 type 属性设置为 image , 就可以将该 表单组件 设置为 图片按钮 类型表单 ;
图片按钮需要设置 src 属性 , 设置一个 图片文件的 绝对或者相对路径 ;
<input type="image" src="submit.png" value="图片按钮"/>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表单 -->
用户名 : <input type="text" value="请输入账号"/>
密 码 : <input type="password"/>
<br />
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="true"/>
<br />
<input type="button" value="普通按钮">
<br />
<input type="submit" />
<input type="submit" value="提交按钮"/>
<br />
<input type="reset" />
<input type="reset" value="重置按钮"/>
<br />
<input type="image" src="submit.png" value="图片按钮"/>
</body>
</html>
展示效果 :
二、文件域
将 <input /> 标签 的 type 属性设置为 file , 就可以将该 表单组件 设置为 文件域 类型表单 ;
文件域 的作用 是 选择文件用的 ;
input type="file"/>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
<base target="_blank"/>
</head>
<body>
<!-- 表单 -->
用户名 : <input type="text" value="请输入账号"/>
密 码 : <input type="password"/>
<br />
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="true"/>
<br />
<input type="button" value="普通按钮">
<br />
<input type="submit" />
<input type="submit" value="提交按钮"/>
<br />
<input type="reset" />
<input type="reset" value="重置按钮"/>
<br />
<input type="image" src="submit.png" value="图片按钮"/>
<br />
<input type="file"/>
</body>
</html>
点击 网页中的 " 选择文件 " 按钮 , 弹出文件选择对话框 ;
选择一个文件打开 , 此时在网页中就会显示刚才打开的文件 ;
相关文章
- html语言添加下划线,HTML页面中怎么文本添加下划线?[通俗易懂]
- html超链接位置怎么改,如何修改HTML超链接样式?
- input file accept限制文件上传类型
- 使用PyPDF2模块处理PDF文件通用方法技巧
- jsp文件开头<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 > 有什么用
- HTML添加背景图片_html背景图片铺满网页
- 文件保存搜索技巧
- matlab 读txt数据_数据库文件的读取
- pytest学习和使用16-HTML报告如何生成?(pytest-html)
- vscode如何运行html文件
- SpringMVC中避免拦截css,js,html图片等静态文件详解编程语言
- resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传后台c#实现详解编程语言
- 的Linux:如何快速拷贝文件(linux文件拷贝出来)
- 文件Linux 打开 HTML 文件的方法(linux打开html)
- Python3 Pandas的DataFrame格式数据写入excle文件、json、html、剪贴板、数据库详解编程语言
- Linux开发HTML网站:一个简单的指南(linux开发html)
- 使用Oracle工具导出脚本文件(oracle导出脚本文件)
- Linux解析HTML:一种快捷的方式(linux解析html)
- Linux实现高效的文件服务器管理(linux做文件服务器)
- 掌握Linux文件的S属性权限知识(linuxs属性)
- 夹Linux关闭文件夹的安全方法(linux关闭文件)
- 使用MySQL和HTML打造高效的数据驱动网站(mysql与html)
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- 夹Linux下快速新建文件夹的简易方法(linux 下新建文件)
- MySQL中如何存储和检索HTML数据(mysql中html)
- MDF文件在SQLServer中的恢复技术
- 让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
- mysql命令行还原phpMyAdmin导出的含有中文的SQL文件
- php实现文件下载更能介绍
- c#读取xml文件到datagridview实例
- html文件中jquery与velocity变量中的$冲突的解决方法