写点什么

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

  • 2022 年 9 月 20 日
    吉林
  • 本文字数:550 字

    阅读完需:约 2 分钟

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

一、表单标签

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


图片 来自 mt 论坛

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

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


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


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


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

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


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

属性值

<!--此处本来有个表格-->


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

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


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

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

结果如下图


 我的评价是一模一样 doge


二、CSS选择器

CSS 实例

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

 


<!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
用户头像

还未添加个人签名 2022.08.25 加入

还未添加个人简介

评论

发布
暂无评论
《简单记个笔记》之表单标签加CSS选择器_九月月更_吉师职业混子_InfoQ写作社区