JavaScript中阶表单

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文详细介绍了HTML表单中的几个关键属性，如autofocus、disabled、selected等，以及它们在JavaScript中的应用。同时，讲解了表单事件，如onfocus、onblur、oninput等，和如何操作下拉列表，包括获取选项、设置选中项、创建与修改option等方法。此外，还展示了如何利用这些属性和事件实现表单交互功能。

表单的特殊属性/标志性属性（不需要属性值，只要有属性名即可生效）

在js中，属性值被布尔转为true时生效，false失效

1、autofocus 自动获得焦点

2、disabled 禁用

3、selected 下拉列表默认选中

4、readonly 只读

5、multiple 下拉列表允许多选

6、checked 单选框/复选框默认选中

表单事件 HTML DOM 事件对象 | 菜鸟教程

	事件	描述
焦点事件	onfocus	获得焦点
	onblur	失去焦点
改变事件	oninput	内容发生改变，不需要失去焦点（通常用于密码强弱的判断）
	onchange	对于input/select/textarea来说发生在内容改变，并且失焦时触发
提交事件	onsubmit	绑定在form表单元素上，不是按钮上
重置事假	onreset	绑定在form表单元素上，不是按钮上
其他的提交重置方法	submit()	btn.οnclick=function(){form.submit()}
	reset()	btn.οnclick=function(){form.reset()}

下拉列表

获取所有option：selectNode.options

 <select name="" id="seclet">
        <option value="gaoxin">高新区</option>
        <option value="jinniu ">金牛区</option>
        <option value="jinjiang">锦江区</option>
    </select>
    <script>
        console.log(select.options); //得到所有option
        console.log(select.options[0]); //得到所有高新区
    </script>

获取选中的option下标：selectNode.selectedIndex

 <select name="" id="seclet">
        <option value="gaoxin">高新区</option>
        <option value="jinniu ">金牛区</option>
        <option value="jinjiang">锦江区</option>
    </select>
    <script>
       let i=select.selectedIndex;//得到下标
        console.log(select.options[i]); //得到对应下标的option
    </script>

获取选中option的value值：selectNode.value

<select name="" id="seclet">
        <option value="gaoxin">高新区</option>
        <option value="jinniu ">金牛区</option>
        <option value="jinjiang">锦江区</option>
    </select>
    <script>
        console.log(select.value); //得到对应内容
    </script>

获取选中option节点：selectNode.selectedOptions

 <select name="" id="seclet">
        <option value="gaoxin">高新区</option>
        <option value="jinniu ">金牛区</option>
        <option value="jinjiang">锦江区</option>
    </select>
    <script>
        console.log(select.selectedOptions); /
    </script>

创建option

除了document.createElement('option')以外，还有通过构造函数的方式创建

let opt = new Option(text(文本)，value(值))；

添加option

除了parentNode.appendChild(opt)以外，还有通过其他的方式

selectNode.options.add(newOpt);

删除option

使用remove()方法

selectNode.options.remove(index);

一次性删除所有option，可以通过将集合的长度为0

selectNode.options.length=0;

修改option

修改option先通过获取option的方式找到需要修改的option元素，然后使用Value和text两个属性来修改

 <select name="" id="seclet">
        <option value="gaoxin">高新区</option>
        <option value="jinniu ">金牛区</option>
        <option value="jinjiang">锦江区</option>
    </select>
    <script>
        select.options[1].value='wuhou';
          select.options[1].text='wuhou';
    </script>