《简单记个笔记》之表单标签加CSS选择器

简介: 简单讲解表单标签+CSS选择器

一、表单标签

在很多网站的登录页上,都会有如下图的界面


69e331905b40484aa8833699fba55626.png


图片 来自mt论坛


登录页的作用毫无疑问是收集用户信息并进行登录态的跳转,那么我们怎样才能做出这样的界面呢?这就涉及到了表单标签的定义。


首先观察页面,是由title加上输入框组成的,那么我们就先构建出来这样一个页面

6f158920e2604a0183bdb0435f1a6479.png



附:在大多数编辑器中html:5可以实现快速输入



19cfdbdd16db4228a7a82cc2844b470d.png


那么负责输入用户名和密码的输入框该如何处理,这就涉及到了<input>标签


a0232a9454904fda8a03e91b4a7c56f1.png


<input>标签需要<from action='此处输入链接'>


<placeborder>则是起到了下图的作用




而type则是对类型进行细致的分化

属性值

值 描述

button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。

checkbox 定义复选框。

colorNew 定义拾色器。

dateNew 定义 date 控件(包括年、月、日,不包括时间)。

datetimeNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。

datetime-localNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。

emailNew 定义用于 e-mail 地址的字段。

file 定义文件选择字段和 "浏览..." 按钮,供文件上传。

hidden 定义隐藏输入字段。

image 定义图像作为提交按钮。

monthNew 定义 month 和 year 控件(不带时区)。

numberNew 定义用于输入数字的字段。

password 定义密码字段(字段中的字符会被遮蔽)。

radio 定义单选按钮。

rangeNew 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。

reset 定义重置按钮(重置所有的表单值为默认值)。

searchNew 定义用于输入搜索字符串的文本字段。

submit 定义提交按钮。

telNew 定义用于输入电话号码的字段。

text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。

timeNew 定义用于输入时间的控件(不带时区)。

urlNew 定义用于输入 URL 的字段。

weekNew 定义 week 和 year 控件(不带时区)。

例如上图的type = "text"就是负责正常显示文本


type = "password"则是专门负责密码的输入,显示出来如下图


2531407f269e403482c24c81a04aa4bd.png


如果没有<type = ‘password’>而是使用<type = ‘text’>,则会导致输入的密码均以明文显示。


而关于登录,则是需要type = "submit" value='登录'就可以了。


结果如下图


cdf0a560e7584d9a8606f7dcdc733ef2.png

cdf0a560e7584d9a8606f7dcdc733ef2.png


我的评价是一模一样doge

二、CSS选择器

CSS 实例

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

37d36d5860855a132522c847e3735ab5.jpg




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

p

{

color:red;

text-align:center;

}

</style>

</head>

<body>

<p>Hello World!</p>

<p>这个段落采用CSS样式化。</p>

</body>

</html>

写不动了,我是屑


目录
相关文章
|
4月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
62 1
|
4月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
65 1
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
66 5
|
2月前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
33 5
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
62 3
|
2月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
64 2
|
4月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
4月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
156 1
|
4月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
30 0