前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第7天:input和label标签

第7天:input和label标签

作者头像
半指温柔乐
发布2018-09-11 15:32:38
9630
发布2018-09-11 15:32:38
举报
文章被收录于专栏:前端知识分享

今天学的不多,就只学了表单元素中的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>

运行效果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-08-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档