实习报告
历史故事
百科知识
理论教育
首页
理论教育
控件属性|零基础JavaScript从入门到精通
控件属性|零基础JavaScript从入门到精通
2023-11-08
理论教育
版权反馈
【摘要】：
表16.1.4表单控件的基本属性2.按钮控件属性按钮控件
属性如下表所示。表16.1.7下拉列表选项属性5.下拉分组属性下拉分组
仅对选项分组，不支持选中，属性如下表所示。表16.1.8下拉列表分组属性6.
属性输入框
和
都拥有formaction、formenctype、formmethod等属性。
会根据type设置为不同的输入控件，不同控件的属性含义一致，但不一定会完全使用到。表16.1.9输入控件属性（续上表）7.
属性文本控件<textarea>和输入控件<input>都拥有maxlength、minlength、placeholder、readonly、required、spellcheck，其他属性如下表所示。 </div> <p>表单控件多种多样，开发者可以根据控件类型将控件的属性分为基本属性和特有属性，通过修改这些属性控制表单行为，实现更好的交互行为。</p> <p>1.基本属性</p> <p>基本属性是指表单控件都具有的属性，如下表所示。</p> <p>表16.1.4 表单控件的基本属性</p> <p><img title="pagenumber_ebook=454,pagenumber_book=439" class="picture_table" id="table_454_307_857_2184_1445" width="791" height="247" src="https://www.chuimin.cn/attached/image/20230913/315019/ef514a5b-9f28-4a8f-888d-b3dee13ad2af.jpg"></p> <p>2.<a href="https://www.chuimin.cn/lilun/1255871.html" target="_blank" class="keywordlink">按钮</a>控件属性</p> <p>按钮控件<button>属性如下表所示。</p> <p>表16.1.5 按钮控件属性</p> <p><img title="pagenumber_ebook=454,pagenumber_book=439" class="picture_table" id="table_454_307_1711_2184_2423" width="791" height="300" src="https://www.chuimin.cn/attached/image/20230913/315019/dea3c026-9d34-45bc-851f-e4602d4439c9.jpg"></p> <p>3.下拉控件属性</p> <p>下拉控件<select>属性如下表所示。</p> <p>表16.1.6 下拉控件属性</p> <p><img title="pagenumber_ebook=454,pagenumber_book=439" class="picture_table" id="table_454_307_2688_2183_2836" width="790" height="62" src="https://www.chuimin.cn/attached/image/20230913/315019/24273686-2ff1-46eb-baac-4118feda4e52.jpg"></p> <p>（续上表）</p> <p><img title="pagenumber_ebook=455,pagenumber_book=440" class="picture_table" id="table_455_283_470_2159_745" width="790" height="115" src="https://www.chuimin.cn/attached/image/20230913/315019/755a5cff-595a-4544-9780-438d20a830f5.jpg"></p> <p>4.下拉选项属性</p> <p>下拉选项<option>属性如下表所示。(www.chuimin.cn)</p> <p>表16.1.7 下拉列表选项属性</p> <p><img title="pagenumber_ebook=455,pagenumber_book=440" class="picture_table" id="table_455_283_1010_2160_1230" width="791" height="92" src="https://www.chuimin.cn/attached/image/20230913/315019/7018fdef-f898-4a19-a978-9a6657be5341.jpg"></p> <p>5.下拉分组属性</p> <p>下拉分组<optgroup>仅对选项分组，不支持选中，属性如下表所示。</p> <p>表16.1.8 下拉列表分组属性</p> <p><img title="pagenumber_ebook=455,pagenumber_book=440" class="picture_table" id="table_455_283_1496_2159_1643" width="790" height="60" src="https://www.chuimin.cn/attached/image/20230913/315019/adb86ad5-36bf-41ee-818a-80f0def3940e.jpg"></p> <p>6.<input>属性</p> <p>输入框<input>和<button>都拥有formaction、formenctype、formmethod等属性。<input>会根据type设置为不同的输入控件，不同控件的属性含义一致，但不一定会完全使用到。<input>的其他属性如下表所示。</p> <p>表16.1.9 输入控件属性</p> <p><img title="pagenumber_ebook=455,pagenumber_book=440" class="picture_table" id="table_455_283_2048_2158_2791" width="790" height="312" src="https://www.chuimin.cn/attached/image/20230913/315019/6d8abdbc-3b4d-4127-976f-5f13edb01a2b.jpg"></p> <p>（续上表）</p> <p><img title="pagenumber_ebook=456,pagenumber_book=441" class="picture_table" id="table_456_307_470_2182_1453" width="790" height="414" src="https://www.chuimin.cn/attached/image/20230913/315019/b120e798-17d5-49a6-a671-6892140c46c6.jpg"></p> <p>7.<textarea>属性</p> <p>文本控件<textarea>和输入控件<input>都拥有maxlength、minlength、placeholder、readonly、required、spellcheck，其他属性如下表所示。</p> <p>表16.1.10 文本控件的其他属性</p> <p><img title="pagenumber_ebook=456,pagenumber_book=441" class="picture_table" id="table_456_307_1794_2184_2196" width="791" height="169" src="https://www.chuimin.cn/attached/image/20230913/315019/162b065a-719c-4c7a-ac0b-658b8b9ddd6a.jpg"></p> </div> <div class="link-box"> <p class="title"> 有关<a style="color: #1810ff;text-decoration:underline;" href="https://www.chuimin.cn/paramet/315019.html" target="_blank">零基础JavaScript从入门到精通</a>的文章 </p> <ul class="loglist"> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104417.html" target="_blank">《零基础JavaScript从入门到精通》</a> <a href="https://www.chuimin.cn/lilun/2104417.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/12.jpg" alt="《零基础JavaScript从入门到精通》"> </a> <div class="text"> <p> 行内JavaScript与前两种方式不同，只需要将JavaScript代码写入HTML标签的属性中，不需要使用单独的<script>标签。目前行内JavaScript有两种使用方式。事件属性有onclick、oncontextmenu、onload、onmousemove等，本书将在第15章详细介绍事件的相关知识。动手写2.2.3执行2.2.3.html，点击按钮显示对话框，如下图所示。图2.2.3HTML事件属性触发执行JavaScript代码2.使用超链接href调用浏览器支持在地址栏输入“javascript:alert”，直接调用当前网页内的JavaScript函数和方法。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104417.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104413.html" target="_blank">零基础JavaScript从入门到精通</a> <a href="https://www.chuimin.cn/lilun/2104413.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/12.jpg" alt="零基础JavaScript从入门到精通"> </a> <div class="text"> <p> 读者应熟练掌握JavaScript的基本理念，确保自己既可以快速掌握使用JavaScript，也可以及时了解和使用JavaScript语言的新特性。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104413.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104467.html" target="_blank">继承方式-零基础JavaScript从入门到</a> <a href="https://www.chuimin.cn/lilun/2104467.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/10.jpg" alt="继承方式-零基础JavaScript从入门到"> </a> <div class="text"> <p> 图12.6.3构造继承采用构造继承的方式避免了在多个子类实例共享父类实例，但也导致子类实例不能继承父类的原型，因此child instanceof Supper等于false。图12.6.4实例继承相比于构造继承，实例继承虽然能够从父类获取原型属性和方法，但产生的问题更加严重，它修改了实例与构造函数的对应关系，导致new Child()返回的是child对象而不是Child的实例。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104467.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104485.html" target="_blank">表单对象简介-零基础JavaScript从入</a> <a href="https://www.chuimin.cn/lilun/2104485.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/1.jpg" alt="表单对象简介-零基础JavaScript从入"> </a> <div class="text"> <p> 图16.1.1访问表单对象提示<form>标签的name属性与document的属性同名时，会覆盖document原有的属性，因此设置表单名称时务必要含义清晰且避开document原有的属性。图16.1.2表单属性表单对象具有两个方法，这两个方法不接收参数，可直接调用：◇ form.reset()，重置所有表单控件为初始值或默认值。图16.1.5显示提交表单到当前网址。表单对象具有特定的提交事件submit，发生在表单提交之前。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104485.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104480.html" target="_blank">事件冒泡简介-零基础JavaScript从入</a> <a href="https://www.chuimin.cn/lilun/2104480.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/2.jpg" alt="事件冒泡简介-零基础JavaScript从入"> </a> <div class="text"> <p> 整个行为类似于气泡从水中冒出，因此称为事件冒泡。事件捕获也是事件传播机制，与事件冒泡传播方向完全相反，相关内容将在下一节介绍。动手写15.1.3执行15.1.3.html，输出结果到网页，如下图所示。图15.1.3事件冒泡依次对document、<body>、<div>、<button>添加click事件监听器，点击按钮之后依次触发buttonListener、divListener、bodyListener、documentListener。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104480.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104483.html" target="_blank">网页卸载方法及流程-零基础JavaScrip</a> <a href="https://www.chuimin.cn/lilun/2104483.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/8.jpg" alt="网页卸载方法及流程-零基础JavaScrip"> </a> <div class="text"> <p> 图15.4.8网页卸载事件发生unload事件时，网页的所有资源会立刻释放，向服务器发送请求几乎都会失败，此时只能完成一些可以立刻完成的操作，比如缓存资源、清理Cookie等。图15.4.9beforeunload事件设置了beforeunload事件的页面，浏览器会提醒数据可能不会被缓存。图15.4.10beforeunload事件为了避免网站显示迷惑性的文字，吓唬用户，部分浏览器全部使用统一的文字描述，比如图15.4.9提示“系统可能不会保存您所做的更改”。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104483.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104446.html" target="_blank">零基础JavaScript从入门到精通-匿名</a> <a href="https://www.chuimin.cn/lilun/2104446.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/9.jpg" alt="零基础JavaScript从入门到精通-匿名"> </a> <div class="text"> <p> 匿名函数也叫闭包函数。相对于具名函数，匿名函数没有名称，需要复制给变量或作为参数传递，或者作为立即调用函数表达式。匿名函数的语法格式与普通函数一样，只是缺少函数名。匿名函数应用范围广泛，具有很强的灵活性。图7.1.7匿名函数使用场景◇ 声明匿名函数直接赋值给customFunction()，该函数除了没有名称，其他地方与具名函数一致，可以重复使用。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104446.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> <li class="con"> <div class="des"> <a class="h2" href="https://www.chuimin.cn/lilun/2104482.html" target="_blank">网页滑动技巧优化-零基础JavaScript</a> <a href="https://www.chuimin.cn/lilun/2104482.html" class="pic" target="_blank"> <img class="img br img-cover" src="https://www.chuimin.cn/chuimin/img/upload/2020/09/8.jpg" alt="网页滑动技巧优化-零基础JavaScript"> </a> <div class="text"> <p> 图15.4.5网页滑动事件滑动一次鼠标会多次触发window的scroll事件。鼠标的滑动事件mousewheel除了用于网页滑动，也可以用于控制日期选择器、Slider幻灯片滑动。mousewheel并不属于标准事件，常见浏览器仅有Chrome、Edge、IE支持，在Firefox下需要使用DOMMouseScroll代替。动手写15.4.6执行15.4.6.html，输出结果到网页，如下两图所示。图15.4.6鼠标滑动事件图15.4.7鼠标滑动事件目前浏览器没有统一鼠标滑动事件，需要对两个事件兼容时，一般直接添加两个事件。......</p> <p class="data"> <span class="time"><i class="fa fa-clock-o"></i>2023-11-08</span> </p> </div> </div> <a href="https://www.chuimin.cn/lilun/2104482.html" target="_blank" class="more">详细阅读<i class="fa fa-angle-right"></i></a> </li> </ul> </div> </div> </div> </div> <div id="sidebar"> <section id="divComments" class="widget widget_suiranx_news_avatarcomment sb br mb"> <h3><span>相关推荐</span></h3> <ul class="widget-content divComments widget_previous"> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104417.html" title="《零基础JavaScript从入门到精通》">《零基础JavaScript从入门到精通》</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104413.html" title="零基础JavaScript从入门到精通">零基础JavaScript从入门到精通</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104467.html" title="继承方式-零基础JavaScript从入门到">继承方式-零基础JavaScript从入门到</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104485.html" title="表单对象简介-零基础JavaScript从入">表单对象简介-零基础JavaScript从入</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104480.html" title="事件冒泡简介-零基础JavaScript从入">事件冒泡简介-零基础JavaScript从入</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104483.html" title="网页卸载方法及流程-零基础JavaScrip">网页卸载方法及流程-零基础JavaScrip</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104446.html" title="零基础JavaScript从入门到精通-匿名">零基础JavaScript从入门到精通-匿名</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104482.html" title="网页滑动技巧优化-零基础JavaScript">网页滑动技巧优化-零基础JavaScript</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104433.html" title="点号运算符详解-零基础JavaScript从">点号运算符详解-零基础JavaScript从</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104418.html" title="零基础JavaScript从入门到精通：代码">零基础JavaScript从入门到精通：代码</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104438.html" title="JavaScriptparseInt函数-零">JavaScriptparseInt函数-零</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104437.html" title="零基础JavaScript从入门到精通-无穷">零基础JavaScript从入门到精通-无穷</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104326.html" title="Creo3.0教程：从入门到精通">Creo3.0教程：从入门到精通</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/1397888.html" title="草图设计实例——从入门到精通">草图设计实例——从入门到精通</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2081062.html" title="AutoCAD2014从入门到精通">AutoCAD2014从入门到精通</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2186109.html" title="从入门到精通，了解While循环">从入门到精通，了解While循环</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2104318.html" title="Creo3.0编辑基础与重定义特征-从入门到">Creo3.0编辑基础与重定义特征-从入门到</a> </div> </li> <li class="list clearfix"> <div class="title"> <a class="a ellipsis" target="_blank" href="https://www.chuimin.cn/lilun/2173606.html" title="CAXA电子图板2015图库操作，从入门到精">CAXA电子图板2015图库操作，从入门到精</a> </div> </li> </ul> </section> </div> </div> </div> <div id="backtop"><span class="fa fa-chevron-circle-up"></span></div> <script src="https://www.chuimin.cn/chuimin/js/common.js" type="text/javascript"></script> <script src="https://www.chuimin.cn/chuimin/js/scrolltxt.js" type="text/javascript"></script> </body> </html>
