码迷,mamicode.com
首页 > 其他好文 > 详细

课时49.非input标签(掌握)

时间:2018-06-08 14:10:27      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:分享图片   去掉   textarea   指定   NPU   掌握   list   com   区分   

1.select标签(下拉列表)

什么是下拉列表?

技术分享图片

这就是下拉列表

作用:

用于定义下拉列表

格式:

<select>

<option>列表数据</option>

</select>

这个下拉列表和datalist很像,但是它们两个之间有很大的区别

datalist是用来定义待选列表,将来它可以绑定某一个输入框,而下拉列表不是用来绑定给谁的,它本身就是一个列表

技术分享图片      技术分享图片

注意点:

1.下拉列表不能输入内容,但是可以直接在列表中选择内容

2.可以通过给option标签添加一个selected属性来指定列表的默认值

技术分享图片    技术分享图片刷新后就会自动选中上海

如果我们写了很多区,有北京的,有上海的,我们怎么区分它们呢?

技术分享图片   技术分享图片

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

技术分享图片技术分享图片

2.textarea标签

作用:

定义一个多行输入框

格式:

<textarea>

</textarea>

注意点:

  1. 默认情况下输入框可以无限换行
  2. 默认情况下输入框有自己的宽度和高度
  3. 可以通过cols和rows来指定输入框的宽度和高度,但是虽然指定了列数和行数,但是还是可以无限往下输入
  4. 默认情况下输入框是可以手动拉伸的

技术分享图片通过点击右下角的标志

技术分享图片  技术分享图片

如何利用css,将多行输入框的拉伸点去掉

技术分享图片技术分享图片

课时49.非input标签(掌握)

标签:分享图片   去掉   textarea   指定   NPU   掌握   list   com   区分   

原文地址:https://www.cnblogs.com/luckyshuangshuang/p/9154938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!