继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第4天 前端工程师2022版 表单标签第一讲

artimis_new
关注TA
已关注
手记 39
粉丝 3
获赞 19

课程名称:前端工程师2022版

课程章节:表单标签


课程讲师: elex

课程内容:

1  单行文本框


<input type="text" value="已经填写好的值" placeholder="浅色提示文本">

              还可以添加山disable 表示锁死单行文本框


2 通过type="radio"来表示单选按钮(类似于家用老式收音机 按钮  按住某个其他按钮复原)


<input type="radio" name="sex">男

<input type="radio" name="sex">女

    重点是name必须相同才能达到互斥的效果

   value=“”表示提交给服务器的实际数据


   chcked 表示初始化 默认选择


3 label标签目前存在两个版本的写法


   label主要实现效果:用户通过点击文字也能选上按钮


      html5写法


1.{<label>

<input type="radio" name="sex">男

</label>


<label>

<input type="radio" name="sex">女

</label>

直接用label包裹即可

     html4写法


<input type="radio" name="sex" id="nan"><label for="nan">男<label/>

<input type="radio" name="sex" id="nv"><label for="nv">女<label/>

通过label包裹文字文本 并且再label中添加for   input中的id  最终对应上才能完成效果

     

4 复选框 

<label>

<input type="checkbox" name="hobby" value="football">足球

</label>


<label>

<input type="checkbox" name="hobby" value="baskball">篮球

</label>


<label>

<input type="checkbox" name="hobby" value="glball">橄榄球

</label>


<label>

<input type="checkbox" name="hobby" value="maoball">羽毛球

</label>

虽然name没有要求一致 这样也是无妨的,

}


课程收获:

谢谢老师,讲的非常细致,很容易懂。





打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP