第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

一、input

input标签type属性有以下几个: text、password、textarea、radio、checkbox、button、submit、reset 按钮 1、<input type="button" value="确定"> 2、<input type="submit" >  提交 3、<input type="reset" >   重置

二、label标签

checked默认被选择;radio单选name属性必须一致。 <input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label> <input type="radio" name="sex" id="nv"/><label for="nv">女</label>

复选框也如同 <input type="checkbox" id="kk"/><label for="kk">10天内免登陆</label>

所有表单元素都有label,label标签作用于选择框和文字,简言之,就是用户点击选择框和文字都可以选择内容

下面是小练习,没有添加样式,有点丑。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单元素</title> </head> <body> <div> 用户名:<input type="text"><br/><br/> 密 码:<input type="password"><br/><br/> 性 别:<input type="radio" name="sex" id="nan" checked="checked"><label for="nan">男</label> <input type="radio" name="sex" id="nv"><label for="nv">女</label><br/><br/> 爱 好:<input type="checkbox" id="chi" checked="checked"><label for="chi">吃</label> <input type="checkbox" id="shui" checked="checked"><label for="shui">睡</label> <input type="checkbox" id="wan" checked="checked"><label for="wan">玩</label><br/><br/> 城 市:<select> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select><br/><br/> 个人简介:<input type="textarea"><br/><br/> <input type="button" value="确定"> <input type="submit"> <input type="reset"> </div> </body> </html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

CSS常见布局

20420
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360
来自专栏编程微刊

前端css常用的选择小汇

13220
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 基础概念

6610
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20350
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12060
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

21240
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23750
来自专栏前端知识分享

第9天:CSS精灵图

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

35330
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

53390

扫码关注云+社区

领取腾讯云代金券