当前位置: 首页 > news >正文

Day4表单-imput标签

表单的作用是为了在网页上收集用户信息,一般在登录页面,注册页面和搜索区域应用
inpute标签的基本使用
image

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input标签的基本使用</title>
</head>
<body>文本框: <input type="text"><br><br>密码框: <input type="password"><br><br>单选框: <input type="radio"><br><br>多选框: <input type="checkbox"><br><br>上传文件: <input type="file">
</body>
</html>

image

input标签的占位文本
image

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>inpute占位符</title>
</head>
<body>文本框: <input type="text" placeholder="请输入用户名"><br><br>密码框: <input type="password" placeholder="请输入密码">
</body>
</html>

image

单选框
image

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input单选框</title>
</head>
<body>性别<input type="radio" name="gender"> 男<input type="radio" name="gender" checked> 女<!-- 为提升用户体验,对受众性别差异明显的,可以用checked来默认进入网页是哪个选项 --></body>
</html>

即进入该网页之后会默认先选在女这一选项上

上传文件——file
当要上传多个文件时,运用multiple可以实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上传多个文件</title>
</head>
<body><input type="file" multiple>
</body>
</html>

多选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选框</title>
</head>
<body><input type="checkbox">学代码<input type="checkbox" checked>学前端代码<input type="checkbox" checked>学前端HTML代码<!-- 类似的,单选框的默认选项在多选框上同样适用 -->
</body>
</html>

image

http://www.hskmm.com/?act=detail&tid=39672

相关文章:

  • 学好专业,养好体魄——我的学习感悟
  • 昨天 今天 明天
  • 加密算法相关
  • 刻意练习的重要性
  • 利用 kubeadm 快速部署 kubernetes(k8s) 集群
  • 第七周物理实验:分光仪调节及三棱镜折射率测量
  • 联发科技 Genio 物联网高效的平台,引领 IoT 智能新时代
  • 20232324 2025-2026-1 《网络与系统攻防技术》实验三实验报告
  • 密码学学习
  • 电脑文件系统整理概要
  • 为自己读书
  • Boost.asio中的协程队列库
  • 第6天(简单题中等题 不定长滑动窗口)
  • 代码大全阅读笔记
  • 主动求索:大学生应掌控学习与时间
  • 沉入 遗忘 海底 躲进 存在感的盲区 kill my memory 请把项上垃圾移去
  • 2025.10.25 测试 广二 + 梦熊
  • Serilog 日志库的简介
  • 2025东莞环评公司/环评手续/环评报告/环评验收推荐:广东三洁环保,专业高效,合规保障
  • word文档使用技巧----一键插入题注
  • 再见 懦弱者的泪滴 善恶判断舍弃 永别 那廉价的正义
  • 变盲从为探索:专注听课
  • 以听为基,以做为翼
  • 【CI130x-离在线】FreeRTOS的信号量
  • 践行 “学思行”,解锁学习新境界
  • 【ArcMap】按属性表复制字段并上移一段距离
  • CF1060
  • 以专注筑基,以实践致远
  • 2025.10.24 测试
  • 102302139 尚子骐 数据采集与融合作业1