close

Form HTML 소개: 구조, 입력 유형 및 예

HTML은 form 사용자가 웹 사이트와 상호 작용하고 데이터를 서버에 제출할 수 있도록 하는 웹 개발의 중요한 부분입니다. 사용자 정보 수집, 사용자 입력 처리, 웹 사이트에서 사용자 작업 활성화와 Form 같은 다양한 목적으로 사용됩니다. form 이 기사에서는 HTML에서 일반적으로 사용되는 속성 및 다양한 유형의 입력 필드, 선택 요소, 텍스트 영역 및 버튼을 탐색합니다 form.

입력 필드

  • <input type="text">: 사용자가 영숫자를 입력할 수 있는 텍스트 입력 필드를 생성합니다.
  • <input type="password">: 입력한 문자를 마스킹하는 비밀번호 입력란을 표시합니다.
  • <input type="email">: 유효한 이메일 주소가 필요한 입력 필드에 대한 이메일 유효성 검사를 제공합니다.
  • <input type="number">: 숫자 값만 입력하도록 제한합니다.
  • <input type="checkbox">: 사용자가 선택하거나 선택 해제할 수 있는 체크박스를 나타냅니다.
  • <input type="radio">: 사용자가 옵션 그룹에서 하나의 옵션을 선택할 수 있는 라디오 버튼을 나타냅니다.
  • <input type="file">: 사용자가 파일을 선택하고 업로드할 수 있습니다.
  • <input type="submit">: 클릭 시 제출하는 버튼을 표시합니다 form.
  • <input type="reset"> form: 를 초기 상태로 되돌리는 버튼을 표시합니다 .
  • <input type="date">: 날짜 선택을 위한 날짜 선택기를 제공합니다.
  • <input type="time">: 사용자가 시간 값을 입력할 수 있습니다.

요소 선택

  • <select>: 선택 가능한 옵션이 있는 드롭다운 메뉴를 만듭니다.
  • <option>: 태그 안에 있는 드롭다운 메뉴 내에서 옵션을 정의합니다 <select>.
  • <optgroup>: 드롭다운 메뉴 내에서 관련 옵션을 함께 그룹화합니다.
  • <select multiple>: 사용자가 Ctrl 키(또는 Mac의 경우 Command 키)를 누른 상태에서 클릭하여 여러 옵션을 동시에 선택할 수 있습니다.

텍스트 영역

<textarea>: 사용자가 더 긴 텍스트 블록을 입력하고 편집할 수 있는 여러 줄 텍스트 입력 필드를 만듭니다. 치수를 정의하기 위해 rows 및 와 같은 속성으로 크기를 조정하고 구성할 수 있습니다. cols

버튼

<button>: 에서 다양한 작업을 트리거할 수 있는 버튼을 나타냅니다 form. form JavaScript 함수 에 따라 를 제출하거나 form 다른 페이지로 이동하는 데 사용할 수 있습니다 .

사용 예:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

이 예제는 필드,, 및 버튼을 form 포함한 다양한 요소의 사용법을 보여 줍니다. 특정 요구 사항에 따라 요소와 속성을 자유롭게 사용자 정의하십시오. input textarea checkbox select dropdown submit form