이 글의 주요 목적은 폼 기본 사항, 텍스트 상자 스크립트 관련 사용법, 선택 상자 스크립트 관련 사용법 및 기타 지식 등 폼 관련 지식을 소개하는 것입니다. 최신 웹 개발에서는 양식 기본 동작이 양식 데이터를 제출하는 데 거의 사용되지 않지만 대신 기본 동작이 비활성화된 다음 Ajax를 사용하여 POST 요청을 통해 양식 데이터를 비동기적으로 제출합니다. 그러나 이것이 더 이상 형식이 중요하지 않다는 의미는 아닙니다. JavaScript는 양식 필드의 값을 빠르게 얻을 수 있는 많은 속성과 메서드를 제공하기 때문에 양식은 여전히 양식을 제출하는 가장 빠른 방법입니다. 그러므로 여전히 형태를 이해하고 숙달하는 것이 필요합니다.
form form
property
method
event
양식 필드에는 입력, 버튼, 선택이 포함됩니다. , 텍스트 영역, 다음 속성 메소드 이벤트는 모든 양식 필드에 공통됩니다.)
Attributes
Methods
Events
텍스트 상자(입력, 텍스트 영역)
텍스트 선택
필터 입력
자동으로 포커스 전환
속성
실용적용
선택 상자(선택, 옵션)
id를 통해 HTML의 Form 태그 가져오기 , 클래스, 이름 속성을 획득하거나 양식 태그를 통해 직접 획득합니다. 물론 document.forms를 사용하여 HTML의 모든 양식 요소를 얻을 수도 있으며 NodeList 객체가 반환됩니다. document.forms获取HTML中所有表单元素，会返回一个NodeList对象。
说一个重要的
elements: document.forms[0].elements 返回类数组对象，包含该form表单下所有表单字段。可以通过表单字段的name属性或者索引访问.
let form = document.forms[0] form.element[0] === form.element['index-0']
在form表单上的方法有submit、reset方法。在现代web开发中，都会阻止form表单提交的默认行为。当没有参数时，可以在不点击按钮的情况下将所有表单字段的值向服务器提交数据。通常，存在以下三种按钮可以提交表单数据。
<input type="submit" value='提交' /> <button type='submit'>提交</button> <input type="image" src='pic.png' />
submit: 当给form表单绑定submit事件，在点击图像按钮或者type为submit的按钮会提交表单数据。此时可以通过事件对象阻止表单全局提交的默认行为。在提交表单时，为避免用户多次点击导致多次提交的问题，可以在提交后禁用提交按钮。
都比较简单，有如下：
name
value
form: 指向当前表单元素，只读。
type
readOnly
disabled
autofocus: 自动获得焦点。HTML5新增属性。<input type="text" autofocus />
document.forms[0].elements 양식 아래의 모든 양식 필드를 포함하여 배열과 유사한 객체를 반환합니다. 양식 필드의 이름 속성이나 인덱스를 통해 액세스할 수 있습니다.document.addEventLitener('DOMContentLoaded', e => {
let input = docuemnt.querySelector('.input-1')
input.focus()
}, false)let input = document.querySelector('.input-0')
input.addEventListener('focus', e => {
e.target.style.backgroundColor = '#ccc'
}, false)
input.addEventListener('blur', e => {
e.target.style.backgroundColor = '#fff'
}, false)<input type="text" 자동 초점 />. 이 이벤트를 지원하는 브라우저에는 IE10+, Chrome 및 Firefox가 포함됩니다. 따라서 지원되는 브라우저의 자동 초점은 true를 반환하고, 지원되지 않는 경우 빈 문자열을 반환합니다. Methods
// type为number时，可以指定min,max,step(表示某个值得倍数)属性 <input type="number" min='0' max='100' step='5' name='count'> // 此时正则默认添加了^, $，即以下正则等于'^\d+$' <input type='text' pattern='\d+'>
Event
// 当input元素获得焦点是选择文本
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
e.target.select()
}, false)change 이벤트: 입력 및 텍스트 영역 요소의 경우 포커스를 받는 상태에서 포커스를 잃는 상태로 변경되고 값이 변경될 때 변경 이벤트가 트리거됩니다. 선택 요소의 경우 값이 변경될 때마다 변경 이벤트가 트리거됩니다. 즉, 포커스를 잃지 않고 변경 이벤트가 트리거됩니다. 이 세부 사항에는 주의가 필요합니다.
// type为number时，可以指定min,max,step(表示某个值得倍数)属性 <input type="number" min='0' max='100' step='5' name='count'> // 此时正则默认添加了^, $，即以下正则等于'^\d+$' <input type='text' pattern='\d+'>
1.select方法：input和textarea元素都支持selct方法。这个方法不接受任何参数，表示选择某个文本框元素的所有文本
// 当input元素获得焦点是选择文本
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
e.target.select()
}, false)2.setSelectionRange方法：这个方法用于选择部分文本内容。接受两个参数，起始位置和结束位置。HTML5新增的方法。IE9+以上浏览器支持。
// 当input获得焦点时，选择文本中的第二个值
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
let target = e.target
console.log(target.setSelectionRange(1, 2))
}, false)3.select事件：当文本框元素中的文本被选中时，就会触发select事件。只要选中文本就会触发，不需要全选。
4.selectionStart, selectionEnd属性：这两个属性用于或者用户选中的文本内容。因此，可以与select事件结合使用，获取用户选中的文本内容。HTML5新增的两个属性。IE9+以上浏览器支持。
let input = document.querySelector('.input-1')
input.addEventListener('select', e => {
let target = e.target
let start = target.selectionStart
let end = target.selectionEnd
console.log(target.value.slice(start, end))
}, false)文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要input元素中只允许输入数字。这时候就需要用到文本的过滤。基本思路如下
1.通过监听keypress事件，判断输入时的字符是否是数字。通过charCode判断。keypress事件会在用户按下键盘上的【字符键】时触发。
2.如果不是，则取消默认行为，即取消文本的输入。
let input = document.querySelector('.input-1')
input.addEventListener('keypress', e => {
let charCode = e.charCode
if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
e.preventDefault()
}
}, false)此方法通过charCode属性来判断用户输入的字符是否是数字字符，如果是则可以输入，如果不是则禁止输入。这里要注意的是，不能通过input的value属性来判断。因为keydown和keypress事件会在value改变之前触发，而keyup事件则是在value发生改变之后触发。因此，keypress获取value值是上一次的值，但是keypress事件可以获取到按下键盘时的charCode属性，然后通过String对象的fromCharCode转成对应的字符，根据此字符做一次正则验证即可。同时，charCode属性只有在keypress事件才存在，在keydown和keyup事件中都会返回0。
这种应用主要用于手机号码上。如手机号码可以分为'334'的结构。因此可以创建三个input，当输入完毕时自动切换焦点到下一个input上。
// 必须设置最大值
<input type="text" name='text1' maxlength="3">
<input type="text" name='text2' maxlength="3">
<input type="text" name='text3' maxlength="4">
// 当value的length等于maxleng时，发生跳转
function judge (len, max, target, form) {
if (len === max) {
let length = form.elements.length
for (let i = 0; i < length; i++) {
if (target === form.elements[i]) {
if (form.elements[i + 1]) {
form.elements[i + 1].focus()
}
}
}
}
}
// 给三个input绑定keyup事件，通过事件代理方式。
document.addEventListener('keyup', e => {
let target = e.target
let form = target.form
let len = target.value.length
let maxLen = target.maxLength
switch (target.name) {
case 'text1':
judge(len, maxLen, target, form)
break
case 'text2':
judge(len, maxLen, target, form)
break
case 'text3':
judge(len, maxLen, target, form)
break
}
}, false)选择框是通过select和option元素组合而成的。除了表单字段共有的属性和方法之外，在这两个元素上提供了其他的属性和方法。目的是为了更加方便的操作选择框元素。
add(newOption, targetOption)：在select元素上有add方法，向select元素插入新的option元素。传入两个参数：新的option元素和目标option元素。
multiple属性: 是否允许多项选择。如果未添加此属性，则select元素的type属性为'select-one'。否则为'select-multiple'。
options属性：取得该select元素下的所有options元素。返回一个类数组对象。
selectedIndex属性: 选中options元素的索引值。
size属性: 可见的行数
value属性: 发送到服务器的值，如果没有这个属性，则会取innerText的值。
index: 索引值
label: 当前选项的标签
selected: 被选中的option元素
text: 文本
value: 发送到服务器的值
위 내용은 JavaScript의 양식에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
