JavaScript의 모든 유형의 HTML 입력에서 값을 검색하는 방법

이 블로그에서는 JavaScript를 사용하여 HTML 형식의 다양한 입력 유형에서 값을 ID로 검색하는 방법을 설명합니다.

입력 유형 및 검색 방법

1. 텍스트 입력

• HTML 코드:

  <input type="text">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  const textValue = document.getElementById('textInput').value;

로그인 후 복사

• 설명: 텍스트 입력 필드에 입력된 값을 검색합니다.

---

2. 이메일 입력

• HTML 코드:

  <input type="email">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const emailValue = document.getElementById('emailInput').value;

• 설명: 사용자가 입력한 이메일을 검색합니다. 이 필드에는 유효한 이메일 형식이 필요합니다.

---

3. 비밀번호 입력

• HTML 코드:

  <input type="password">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const passwordValue = document.getElementById('passwordInput').value;

• 설명: 비밀번호 입력 필드에 입력된 텍스트를 검색합니다.

---

4. 숫자입력

• HTML 코드:

  <input type="number">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const numberValue = document.getElementById('numberInput').value;

• 설명: 입력란에 입력된 숫자를 검색합니다.

---

5. 날짜 입력

• HTML 코드:

  <input type="date">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const dateValue = document.getElementById('dateInput').value;

• 설명: YYYY-MM-DD 형식으로 선택한 날짜를 검색합니다.

---

6. 라디오 버튼

• HTML 코드:

  <input type="radio">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;

• 설명: 선택한 라디오 버튼의 값을 검색합니다. 아무것도 선택하지 않으면 null을 반환합니다.

---

7. 체크박스

• HTML 코드:

  <input type="checkbox">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

• 설명: 선택된 모든 체크박스 값을 배열로 검색합니다. 확인란을 선택하지 않으면 빈 배열이 반환됩니다.

---

8. 드롭다운(선택)

• HTML 코드:

  <select>

• JavaScript Code:

  const dropdownValue = document.getElementById('dropdownInput').value;

• 설명: 드롭다운 메뉴에서 선택한 값을 검색합니다.

---

9. 텍스트 영역

• HTML 코드:

  <textarea>

• JavaScript Code:

  const textareaValue = document.getElementById('textareaInput').value;

• 설명: 텍스트 영역 필드에 입력된 텍스트를 검색합니다.

---

예: 전체 스크립트

다음은 양식의 모든 입력 유형에서 값을 검색하는 예입니다.

  <input type="text">

• JavaScript Code:

  const textValue = document.getElementById('textInput').value;

---

사용방법

1. 지정된 ID 속성을 사용하여 HTML 양식 요소를 웹페이지에 추가하세요.
2. 해당 JavaScript 스니펫을 사용하여 입력에서 값을 검색합니다.
3. 수집된 데이터는 기록되거나 추가 처리를 위해 서버로 전송될 수 있습니다.

---

이 문서는 HTML의 다양한 입력 유형으로 작업하고 JavaScript를 사용하여 해당 값을 수집하는 방법에 대한 명확한 참조를 제공합니다.

위 내용은 JavaScript의 모든 유형의 HTML 입력에서 값을 검색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!