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

重学前端004 --- html 表单

文章目录

  • 记录
    • form action
    • label
    • input
  • div
  • 总结
    • 各种单位

记录

form action

method 属性指定了如何将表单数据发送到 action 属性中指定的 URL。
表单数据可以通过 GET 请求作为 URL 参数发送(method=“get”)或通过 POST 请求作为请求正文中的数据发送(method=“post”)。

label

label 元素默认是行内元素,它们出现在其标签文本的同一行,使得文本难以阅读。 给 label 元素添加 display: block,来使其显示在不同的行,并且行之间有一定的距离。

input

type: text, email, password, number

email 类型只允许包含 @ 以及域名中包含 . 的电子邮件。
password 类型会屏蔽输入,如果网站没有启用 HTTPS 会警告。

给密码 input 元素添加自定义验证,新增 minlength 属性设置其值为 8。
这样密码少于 8 个字符的时候会阻止提交。

div

.inline {width:unset; # 移除之前设置的这个元素的width设置vertical-align: middle;
}

总结

各种单位

单位类型基准特点使用场景
px绝对单位屏幕像素固定大小,精确控制图标、边框、固定尺寸元素
vh相对单位视口高度基于视口高度,响应式设计友好全屏背景、高度动态调整
vw相对单位视口宽度基于视口宽度,响应式设计友好全屏背景、宽度动态调整
em相对单位当前元素或父元素的字体大小相对性较强,可能受嵌套影响字体大小、局部尺寸调整
rem相对单位根元素(<html>)的字体大小 相对基准固定,易于控制全局字体大小、响应式布局
http://www.xdnf.cn/news/15165.html

相关文章:

  • 从二维到三维:数字孪生如何重塑UI前端设计
  • 【Git】git的回退功能
  • Flutter优缺点
  • 港科大 NMPC 控制下的高效自主导航!SkyVLN:城市环境无人机视觉语言导航与非线性模型预测控制
  • 哪些因素会影响NMR杂质检测的准确性
  • 全面掌控 Claude Code:命令 + 参数 + 快捷键一文全整理(建议收藏)
  • Linux的基础I/O
  • 如何在 PyCharm 批量调整代码缩进?PyCharm 调整代码格式化和代码缩进的快捷键有哪些?
  • S7-1200 与 S7-300 CPS7-400 CP UDP 通信 Step7 项目编程
  • 最常用的JS加解密场景MD5
  • Vue 3 入门——自学习版本
  • 分布式推客系统全栈开发指南:SpringCloud+Neo4j+Redis实战解析
  • C#事件:从原理到实践的深度剖析
  • 微软语音合成标记语言SSML文档结构和事件(详细文档和实例)
  • 基于Python的豆瓣图书数据分析与可视化系统【自动采集、海量数据集、多维度分析、机器学习】
  • Ubuntu20.04运行openmvg和openmvs实现三维重建(未成功,仅供参考)
  • AI金融风控:识别欺诈,量化风险的新利器
  • 批量合并全国地理信息资源目录服务系统下载的全国基础地理数据
  • JAVA JVM垃圾收集
  • JavaScript 异步编程指南:async/await 与 Promise 该怎么选?
  • 中国银联豪掷1亿采购海光C86架构服务器
  • 第十五章 STL(stack、queue、list、set、map容器使用)
  • 基于Selenium和FFmpeg的全平台短视频自动化发布系统
  • Linux小白学习基础内容
  • 反向传播notes
  • 重新配置电脑中的环境变量
  • NFS文件存储及部署论坛(小白的“升级打怪”成长之路)
  • GO启动一个视频下载接口 前端可以边下边放
  • 计算机网络实验——以太网安全实验
  • 图解LeetCode:79递归实现单词搜索