[ javascript ] 26. form 요소

javascript+es6

[ javascript ] 26. form 요소

변쌤(이젠강남) 2024. 3. 27. 19:46

form 요소

웹 개발에서 사용되는 다양한 HTML 폼 요소들이 있습니다. 이러한 요소들은 사용자로부터 정보를 입력하거나 선택할 수 있도록 합니다. 주요 폼 요소들은 다음과 같습니다

텍스트 입력 필드 (Text Input Fields):
<input type="text">: 한 줄짜리 텍스트를 입력할 수 있는 상자를 생성합니다.
<input type="password">: 비밀번호를 입력받을 때 사용되며, 입력한 문자를 마스킹하여 표시합니다.
<input type="email">: 이메일 주소를 입력받을 때 사용됩니다.

<input type="number">: 숫자 값을 입력받을 때 사용됩니다.
<input type="tel">: 전화번호를 입력받을 때 사용됩니다.
<input type="date">, <input type="time">, <input type="datetime-local">: 각각 날짜, 시간, 날짜와 시간을 입력받을 때 사용됩니다.

텍스트 여러줄:
<textarea>: 여러 줄의 텍스트를 입력할 수 있는 상자를 생성합니다.

선택 입력 필드 (Select Fields):
<select>: 드롭다운 목록을 생성합니다. <option> 요소를 포함하여 여러 옵션 중 하나를 선택할 수 있습니다.
<input type="radio">: 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼을 생성합니다.
<input type="checkbox">: 다수의 옵션 중 여러 개를 선택할 수 있는 체크박스를 생성합니다.

파일 업로드 (File Upload):
<input type="file">: 파일을 선택하여 서버로 업로드할 수 있는 파일 입력 필드를 생성합니다.

버튼 (Buttons):
<button>: 클릭 가능한 버튼을 생성합니다.
<input type="submit">: 폼을 제출하는 버튼을 생성합니다.
<input type="reset">: 폼을 초기화하는 버튼을 생성합니다.

숨김 입력 필드 (Hidden Input Fields):
<input type="hidden">: 사용자에게 표시되지 않고 서버로 데이터를 전송할 때 사용됩니다.

이벤트 종류

submit 이벤트: 사용자가 폼을 제출할 때 발생합니다. 폼의 제출을 막거나(예: 유효성 검사 실패 시), 제출 전에 작업을 수행할 때 유용합니다.

reset 이벤트: 사용자가 폼을 초기화할 때 발생합니다. 필드를 초기 상태로 되돌리거나 기타 작업을 수행할 수 있습니다.

change 이벤트: 폼의 입력 요소(텍스트 상자, 체크박스, 라디오 버튼 등)가 변경될 때 발생합니다.

사용자가 값을 변경할 때마다 작업을 수행할 수 있습니다. ( 값이 변경될 때 이벤트 발생 )

텍스트 입력의 경우 포커스를 잃을 때 실행

input 이벤트: 입력 요소의 값이 변경될 때마다 발생합니다. change 이벤트와는 달리, 사용자가 값을 입력할 때마다 발생하여 실시간으로 반응할 수 있습니다.

( 텍스트가 입력될 때마다 이벤트 발생 , change와 달리 즉시 실행)

focus 이벤트: 입력 요소가 포커스를 받을 때 발생합니다. 사용자가 해당 입력 요소를 클릭하거나 탭할 때 발생합니다.

blur 이벤트: 입력 요소가 포커스를 잃을 때 발생합니다. 사용자가 해당 입력 요소를 떠날 때 발생합니다.

keydown, keyup, keypress 이벤트: 사용자가 키를 누를 때, 키를 떼는 순간, 혹은 키를 누르는 동안 발생합니다. 이를 사용하여 사용자의 키 입력을 감지하거나 제어할 수 있습니다.

contextmenu 이벤트: 우클릭으로 콘텍스트 메뉴를 열 때 발생합니다. 이를 사용하여 사용자의 우클릭을 제어할 수 있습니다.

1. text

텍스트 속성

<input type="text">는 HTML 폼(form) 요소 중 하나로,

사용자로부터 한 줄짜리 텍스트를 입력받는 데 사용됩니다.

이 입력 필드는 사용자가 문자나 숫자 등을 입력할 수 있는 텍스트 상자를 생성합니다.

type: 이 속성은 입력 필드의 종류를 나타내며, 여기서는 "text"로 설정됩니다.
name: 입력 필드의 이름을 나타냅니다. 서버로 제출될 때 이 이름이 해당 필드의 식별자로 사용됩니다.
value: 입력 필드의 초기값을 나타냅니다. 사용자가 입력하기 전에 이미 어떤 값이 포함되어 있을 수 있습니다.
placeholder: 입력 필드에 표시되는 힌트 텍스트를 설정합니다. 사용자에게 어떤 종류의 정보를 입력해야 하는지 안내하는 데 사용됩니다.
maxlength: 입력 필드에 입력할 수 있는 최대 문자 수를 제한합니다.
readonly: 이 속성을 사용하여 입력 필드를 읽기 전용으로 설정할 수 있습니다. 사용자는 이 경우 입력 값을 수정할 수 없습니다.
disabled: 이 속성을 사용하여 입력 필드를 비활성화할 수 있습니다. 비활성화된 필드는 사용자가 값을 입력할 수 없습니다.
autocomplete: 이 속성을 사용하여 자동 완성 기능을 설정할 수 있습니다. 브라우저가 사용자가 이전에 입력한 값들을 기반으로 자동으로 값을 완성합니다.

<label for="username">사용자명:</label>
<input type="text" id="username" name="username" placeholder="사용자명을 입력하세요" maxlength="20">

2. select

selectedIndex: 선택된 옵션의 인덱스를 가져오거나 설정합니다.

selectedOptions: 선택된 옵션들의 컬렉션을 나타냅니다.

options: select 요소의 옵션들을 나타내는 컬렉션입니다.

length: select 요소의 옵션 개수를 나타냅니다.

value: 선택된 옵션의 값을 가져오거나 설정합니다.

 

<h2>선택한 과일에 따라 가격을 표시합니다.</h2>

<!-- 과일 선택을 위한 select 요소 -->
<select id="fruitSelect">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="orange">오렌지</option>
</select>

<!-- 선택한 과일의 가격을 표시할 영역 -->
<div id="priceDisplay"></div>

<script>
// 선택한 과일에 따라 가격을 표시하는 함수
function displayPrice() {
  // select 요소 가져오기
  let selectElement = document.getElementById("fruitSelect");
  // 선택된 옵션의 값을 가져오기
  var selectedValue = selectElement.value;
  
  // 선택된 과일에 따라 가격 설정
  let price;
  switch(selectedValue) {
    case "apple":
      price = "2000원";
      break;
    case "banana":
      price = "3000원";
      break;
    case "orange":
      price = "4000원";
      break;
    default:
      price = "선택한 과일의 가격을 찾을 수 없습니다.";
  }
  
  // 가격을 표시할 요소 가져오기
  let priceDisplayElement = document.getElementById("priceDisplay");
  // 가격 표시
  priceDisplayElement.textContent = "선택한 과일의 가격은 " + price + " 입니다.";
}

// select 요소의 변경을 감지하여 displayPrice 함수 호출
document.getElementById("fruitSelect").addEventListener("change", displayPrice);

// 페이지 로드시 초기 가격 표시
displayPrice();
</script>

동적으로 select 옵션 추가

<h2>동적으로 Select 옵션 추가하기</h2>

<!-- Select 옵션을 표시할 요소 -->
<select id="dynamicSelect">
  <!-- JavaScript로 옵션을 추가할 예정 -->
</select>

<script>
// 옵션을 추가할 select 요소 가져오기
let selectElement = document.getElementById("dynamicSelect");

// 배열에 저장된 항목들
let options = ["사과", "바나나", "딸기", "오렌지", "포도"];

// 배열의 각 항목을 순회하며 select 요소에 옵션 추가
options.forEach(function(option) {
  let optionElement = document.createElement("option"); // 새로운 옵션 요소 생성
  optionElement.value = option; // 옵션의 값 설정
  optionElement.textContent = option; // 옵션의 텍스트 설정
  selectElement.append(optionElement); // select 요소에 옵션 추가
});

// 선택한 옵션을 표시하는 함수
function displaySelectedOption() {
  let selectedOption = selectElement.value; // 선택된 옵션의 값 가져오기
  alert("선택한 옵션: " + selectedOption);
}

// select 요소의 변경을 감지하여 displaySelectedOption 함수 호출
selectElement.addEventListener("change", displaySelectedOption);
</script>

3. check

<h2>여러 개의 체크박스 선택하기</h2>

<!-- 여러 개의 체크박스 -->
<input type="checkbox" id="option1" name="option1" value="option1">
<label for="option1">옵션 1</label><br>
<input type="checkbox" id="option2" name="option2" value="option2">
<label for="option2">옵션 2</label><br>
<input type="checkbox" id="option3" name="option3" value="option3">
<label for="option3">옵션 3</label><br>

<button onclick="getSelectedOptions()">선택된 옵션 가져오기</button>

<script>
// 선택된 체크박스의 값을 가져오고 출력하는 함수
function getSelectedOptions() {
  let selectedOptions = []; // 선택된 옵션들을 저장할 배열
  
  // 모든 체크박스 요소를 가져와서 순회
  let checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(function(checkbox) {
    // 체크된 체크박스의 값을 배열에 추가
    if (checkbox.checked) {
      selectedOptions.push(checkbox.value);
    }
  });
  
  // 선택된 옵션들을 출력
  if (selectedOptions.length > 0) {
    alert("선택된 옵션들: " + selectedOptions.join(", "));
  } else {
    alert("옵션을 선택해주세요.");
  }
}
</script>

전체동의

<h2>전체 동의 체크박스</h2>

<input type="checkbox" id="selectAll" onchange="toggleCheckboxes()">
<label for="selectAll">전체 동의</label><br>

<hr>

<input type="checkbox" id="option1" name="option1" value="option1">
<label for="option1">옵션 1</label><br>
<input type="checkbox" id="option2" name="option2" value="option2">
<label for="option2">옵션 2</label><br>
<input type="checkbox" id="option3" name="option3" value="option3">
<label for="option3">옵션 3</label><br>

<script>
// 전체 동의 체크박스 클릭 시 다른 체크박스 상태 변경 함수
function toggleCheckboxes() {
  let selectAllCheckbox = document.getElementById("selectAll");
  let checkboxes = document.querySelectorAll('input[type="checkbox"]');
  
  // 전체 동의 체크박스의 상태에 따라 다른 체크박스의 상태 변경
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = selectAllCheckbox.checked;
  });
}
</script>

체크박스 name

<h2>체크박스 예제</h2>

<input type="checkbox" name="fruit" value="apple">
<label for="apple">사과</label><br>
<input type="checkbox" name="fruit" value="banana">
<label for="banana">바나나</label><br>
<input type="checkbox" name="fruit" value="orange">
<label for="orange">오렌지</label><br>

<button onclick="checkSelectedFruits()">선택된 과일 확인</button>

<script>
// 선택된 과일을 확인하는 함수
function checkSelectedFruits() {
  let selectedFruits = []; // 선택된 과일을 저장할 배열
  
  // 특정 이름(name)을 가진 체크박스들을 가져오기
  let checkboxes = document.querySelectorAll('input[name="fruit"]');
  
  // 체크박스들을 순회하며 선택된 체크박스들의 값을 배열에 추가
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      selectedFruits.push(checkbox.value);
    }
  });
  
  // 선택된 과일들을 출력
  if (selectedFruits.length > 0) {
    alert("선택된 과일들: " + selectedFruits.join(", "));
  } else {
    alert("과일을 선택해주세요.");
  }
}
</script>

5. radio

여러개중에 하나만 선택

name 동일

checked

<label for="rad1"> 피자</label><input type="radio" name="food" value="피자" id="rad1" />
        <label for="rad2">햄버거</label><input type="radio" name="food" value="햄버거" id="rad2" />
        <label for="rad3"> 파스타</label><input type="radio" name="food" value="파스타" id="rad3" />
        <button onclick="getSelectedFood()">음식선택</button>
        <p id="result"></p>
        <script>
            function getSelectedFood() {
                // 모든 라디오 버튼 요소를 가져오기
                let radios = document.getElementsByName('food');

                // 선택된 옵션을 확인하기 위해 루프 실행
                for (let i = 0; i < radios.length; i++) {
                    // 선택된 라디오 버튼인 경우
                    if (radios[i].checked) {
                        // 선택된 값을 가져와서 결과를 출력
                        document.getElementById('result').innerText =
                            'Selected food: ' + radios[i].value;
                        return;
                    }
                }

                // 선택된 라디오 버튼이 없는 경우
                document.getElementById('result').innerText = 'No food selected';
            }
        </script>

6. textarea

글자수 제한

<textarea id="myTextarea" rows="4" cols="50"></textarea>
<script>
    let textarea = document.getElementById('myTextarea');

    // 최대 글자 수 정의
    let maxLength = 30;

    // 입력 이벤트를 감지하여 글자 수를 제한
    textarea.addEventListener('input', function () {
        let text = textarea.value;
        if (text.length > maxLength) {
            textarea.value = text.substring(0, maxLength);
        }
    });
</script>

속성정리

checked, readonly, selected

disabled => 비활성=ture, 활성=false (모든 input 요소)
readonly => 읽기전용=true, 읽기,쓰기 겸용=false (모든 input 요소)
checked => 체크됨=true, 체크안됨=false (체크박스, 라디오 버튼)
selected => 선택됨=true, 선택해제=false (dropdown의 option태그)

# URL.createObjectURL() : mdn

JavaScript의 URL 인터페이스의 메서드로, File 객체와 같은 미디어 소스를 임시적으로 참조할 수 있는 URL을 생성하는 데 사용됩니다. 이 URL은 메모리에 저장된 데이터를 가리키며, 웹 애플리케이션에서 파일을 표시하거나 다운로드할 수 있도록 합니다.

const objectURL = URL.createObjectURL(object);

'javascript+es6' 카테고리의 다른 글

[ javascript ] 28. 예외처리, 비동기 , Promise, async/await (0)	2024.04.17
[ javascript ] 27. BOM ( window, navigator, screen, location, history ) (2)	2024.04.05
[ javascript ] 25. 정규표현식 ( 정규식 ) (2)	2024.03.13
[ javascript ] 24. window.localStorage (0)	2023.11.28
[ javascript ] 23. 모듈 (0)	2023.11.15

현재글[ javascript ] 26. form 요소

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study