자바스크립트가 양식 값을 변경합니다.

웹 개발에서 양식은 일반적으로 사용자가 데이터를 제출하는 도구로 사용되며 페이지는 이를 수정하거나 제어하기 위해 JavaScript를 사용해야 합니다. 이 기사에서는 JavaScript를 사용하여 양식 값을 변경하는 방법을 소개하고 몇 가지 일반적인 실제 적용 사례를 제공합니다.

JavaScript에서 양식 값을 변경하는 방법

1. JavaScript DOM을 사용하여 양식 요소의 값을 설정합니다.

DOM은 모든 페이지 요소에 액세스하고 수정하는 데 사용할 수 있는 JavaScript용 표준 API입니다. 양식 요소를 포함한 웹 페이지. 양식에 있는 텍스트 상자, 드롭다운 상자, 확인란과 같은 요소의 경우 해당 요소의 value 속성을 설정하여 해당 값을 변경할 수 있습니다.

예를 들어 양식의 이름 입력 상자 값을 "Harry"로 변경하려는 경우 다음 코드를 사용할 수 있습니다.

document.getElementById("name").value = "Harry";

이 코드는 먼저 ID가 "name"인 양식 요소를 선택하고, 그런 다음 해당 값 속성을 " Harry"로 설정합니다.

2. JavaScript Form API를 사용하여 양식 요소의 값을 수정합니다.

Form API는 DOM을 기반으로 하는 양식 요소의 상위 수준 캡슐화입니다. 양식 요소를 처리하기 위해 Form 개체에 액세스하면 양식 요소를 개별적으로 선택하기 위해 id 속성을 사용하지 않아도 되므로 코드가 더욱 깔끔하고 이해하기 쉬워집니다.

예를 들어 "user"라는 양식 요소를 선택된 상태로 설정하려면 다음 코드를 사용하면 됩니다.

document.forms['formName'].elements['user'].checked = true;

여기에서는 먼저 양식의 name 속성을 통해 양식을 선택한 다음 특정 양식 요소를 선택하려면 양식 요소의 이름 속성을 통해 양식을 선택하세요. 다음으로 요소의 selected 속성을 true로 설정하여 선택합니다.

양식 작업의 일반적인 적용 시나리오

1. 양식 자동 채우기

어떤 경우에는 양식의 특정 요소를 자동으로 채워야 할 수도 있습니다. 예를 들어 로그인 페이지에서 사용자가 이미 로그인한 경우 사용자 이름 및 비밀번호 제어의 기본값을 사용자의 로그인 정보로 바꿔야 합니다.

const username = 'example_user';
const password = 'example_password';
document.getElementById('username').value = username;
document.getElementById('password').value = password;

2. 양식 요소의 가용성 제어

양식에 여러 양식 요소가 포함되어 있는 경우 현재 양식 요소의 선택 상태에 따라 다른 양식 요소의 가용성을 제어해야 하는 경우가 있습니다. 예를 들어 옵션을 선택할 때 다른 드롭다운 목록 상자나 텍스트 입력 상자를 활성화할 수 있습니다.

const selectElement = document.getElementById('selectElement');
const textInput = document.getElementById('textInput');
const dropDown = document.getElementById('dropDown');

selectElement.addEventListener('click', () => {
    if (selectElement.value === 'large') {
        textInput.disabled = true;
        dropDown.disabled = false;
    } else if (selectElement.value === 'small') {
        textInput.disabled = false;
        dropDown.disabled = true;
    } else {
        textInput.disabled = true;
        dropDown.disabled = true;
    }
});

이 예에서는 이벤트 수신을 사용하여 드롭다운 목록 상자의 클릭 이벤트를 캡처합니다. 그런 다음 옵션 값에 따라 텍스트 입력 상자와 드롭다운 목록 상자의 사용 가능 여부를 설정합니다.

3. 양식 재설정

사용자가 양식을 다시 작성해야 하는 경우 양식의 모든 요소를 ​​재설정해야 할 수 있습니다. 이 예에서는 양식의 모든 텍스트 입력 상자와 드롭다운 목록 상자에 "재설정" 버튼을 추가하고 양식의 재설정() 메서드를 직접 호출했습니다.

<form id="myForm">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>

    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>

    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select><br><br>

    <button type="reset" onclick="document.getElementById('myForm').reset()">Reset</button>
</form>

위는 JavaScript에서 양식 값을 변경하는 방법과 관련 응용 시나리오입니다. 물론 이는 js 수정 형태의 일부일 뿐이며, 개발 요구에 따라 보다 세부적인 처리 방법을 다루어야 합니다.

위 내용은 자바스크립트가 양식 값을 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!