html5的datalist元素详解

椰子蛋 發表於 2019-12-7 18:38:00

<h1 style="text-align: center">html5的datalist元素详解</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>datalist元素配合input元素可以出现有提示选择作用的选框效果，还是相对比较简便好用的</h5>
 
<h3>1、optgroup元素是干嘛的？</h3>
<h5>optgroup元素用来对option元素进行组合分组</h5>
<div class="cnblogs_code">
<pre><select name="select" id="">
 <optgroup>
 <option value="HTML5">HTML5</option>
 <option value="CSS3">CSS3</option>
 <option value="JAVA">JAVA</option>
 <option value="JAVASCRIPT">JAVASCRIPT</option>
 </optgroup>
 <optgroup>
 <option value="HTML5">HTML5</option>
 <option value="CSS3">CSS3</option>
 <option value="JAVA">JAVA</option>
 <option value="JAVASCRIPT">JAVASCRIPT</option>
 </optgroup>
</select></pre>
</div>
 
 
<h3>2、datalist元素配合input元素做选项框实例？</h3>
<h5>input元素要指定list属性的值为datalist的id</h5>
<div class="cnblogs_code">
<pre><input type="text" name="datalist" list="mydatalist">
<datalist id="mydatalist">
 <optgroup>
 <option value="HTML5">HTML5</option>
 <option value="CSS3">CSS3</option>
 <option value="JAVA">JAVA</option>
 <option value="JAVASCRIPT">JAVASCRIPT</option>
 </optgroup>
 <optgroup>
 <option value="HTML5">HTML5</option>
 <option value="CSS3">CSS3</option>
 <option value="JAVA">JAVA</option>
 <option value="JAVASCRIPT">JAVASCRIPT</option>
 </optgroup>
</datalist></pre>
</div>
 
 
<h2>二、html5--select与HTML5新增的datalist元素</h2>
 
<h3>学习要点</h3>
<ul>
<li>掌握select元素与datalist元素的使用</li>
</ul>
<h4>select元素</h4>
<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171203220215054-299796811.png" alt="">
<ul>
<ul>
<li>用来建立一个下拉菜单选项列表</li>
</ul>
</ul>
 
<ul>
<ul>
<li>不仅可以在表单中使用，还可以在其他块元素和内联元素中使用</li>
</ul>
</ul>
 
<ul>
<ul>
<li>select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立</li>
</ul>
</ul>
 
<ul>
<ul>
<li>option元素可以用来建立一个选项，即下拉列表的一个菜单项</li>
<li>optgroup元素用来对option元素进行组合分组</li>
</ul>
<li>size用来定义列表中显示的列表项</li>
<li>multiple属性用来定义是否可以多选</li>
<li>可以添加disabled属性和autofocus属性</li>
</ul>
<h4>datalist元素</h4>
<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171203221956522-178708619.png" alt="">
 
<ul>
<ul>
<li>HTML5新增元素，用来建立一个选项列表</li>
</ul>
</ul>
 
<ul>
<ul>
<li>datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项</li>
</ul>
</ul>
 
<ul>
<ul>
<li>通常与input元素配合使用</li>
</ul>
</ul>
 
<h3>实例</h3>
 <img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171203223036835-452653190.png" alt="">
<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171203223257210-909407604.png" alt="">
 
<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171203223249147-331591424.png" alt="">
 
 
<div class="cnblogs_code">
<pre> 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <p style="color:#FF0000">
 8 
14
15 </p>
16 <form action="L3_01.html" method="get">
17 
22 <p2 style="color:#FF0000">这是select元素</p2><br>
23 请选择你喜欢的课程：<select name="select" id="">
24 <optgroup>
25 <option value="HTML5">HTML5</option>
26 <option value="CSS3">CSS3</option>
27 <option value="JAVA">JAVA</option>
28 <option value="JAVASCRIPT">JAVASCRIPT</option>
29 </optgroup>
30 <optgroup>
31 <option value="HTML5">HTML5</option>
32 <option value="CSS3">CSS3</option>
33 <option value="JAVA">JAVA</option>
34 <option value="JAVASCRIPT">JAVASCRIPT</option>
35 </optgroup>
36 </select><br><br>
37
38 <p2 style="color:#FF0000">这是datalist元素</p2><br>
39 <input type="text" name="datalist" list="mydatalist">
40 <datalist id="mydatalist">
41 <optgroup>
42 <option value="HTML5">HTML5</option>
43 <option value="CSS3">CSS3</option>
44 <option value="JAVA">JAVA</option>
45 <option value="JAVASCRIPT">JAVASCRIPT</option>
46 </optgroup>
47 <optgroup>
48 <option value="HTML5">HTML5</option>
49 <option value="CSS3">CSS3</option>
50 <option value="JAVA">JAVA</option>
51 <option value="JAVASCRIPT">JAVASCRIPT</option>
52 </optgroup>
53 </datalist>
54 <br><input type="submit" value="确定"><br>
55 </form>
56
57 <body>
58 </body>
59 </html></pre>
</div>
 
<div> </div>

</div>
<div id="MySignature" role="contentinfo">
<div id="fry_added_part">
<div class="fry_website">
 <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
 我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
 【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
 </div>
 <div class="copyright" style="color: red;padding-bottom: 10px;">
 版权申明：欢迎转载，但请注明出处
 <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
 </div>
 <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
 <div style="display:none;"></div>
 <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
 <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
 </div>
 <div class="copyright" style="color: green;padding-bottom: 10px;">
 录播课资料github地址：https://github.com/fry404006308/fry_course_materials
 </div>
 <div style="display:none;"></div>
</div>
<div class="fry_tech_group" style="color: mediumpurple;">
 <div>
 AI交流资料群：753014672
 </div>
</div>
<div class="fry_recommend">
 <h2>作者相关推荐</h2>
 <div id="fry_recommend" style="padding-bottom: 40px">
 </div>
</div>
<style>
 #fry_added_part .inspiration_content{
 //max-height: 120px;
 overflow: auto;
 margin: 20px 0;
 }
 #fry_added_part .fry_inspiration .simple a{
 margin-right: 25px;
 }
</style>
<div style="display:none;" class="fry_inspiration">
 <div style="color: red;font-size: 20px;text-align: center;" class="title">
 感悟总结
 </div>
 
 
 <div class="detail">
 <div class="url_set">
 <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
 
 
 </div>
 <div class="content_set"></div>
 </div>
 
 <div style="display: none;" class="simple">
 <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
 <div>
 感悟总结200813
 最近心境200830
 最近心境201019
 201218-210205
 </div>
 </div>
</div>
</div> 
来源：https://www.cnblogs.com/Renyi-Fan/p/12002911.html

頁: [1]

琼殿技术论坛's Archiver

html5的datalist元素详解