HTML의 폼

1. 폼과의 첫 만남

HTML의 폼은 사용자가 웹 페이지와 상호 작용할 수 있는 중요한 도구야. 텍스트, 리스트 선택, 파일 또는 기타 데이터를 서버로 전송하여 처리할 수 있도록 수집할 수 있어. HTML에서 폼은 여러 요소로 구성되며, 각각은 특정 유형의 데이터 입력에 사용돼. 폼의 주요 요소는 <form>이며, 이 요소는 <input>, <textarea>, <button>, <select> 등 다른 요소들을 포함해.

폼의 주요 요소

폼의 요소들은 입력 필드, 버튼, 드롭다운 리스트 등 사용자 인터페이스를 구성하는 요소들을 생성할 수 있게 해. 폼에서 사용하는 주요 태그:

• <form> — 모든 폼 요소를 포함하는 메인 컨테이너야. 폼이 어디로 어떻게 전송될지를 결정해.
• <input> — 다양한 유형의 입력 필드를 생성할 수 있는 범용 요소야 (텍스트, 비밀번호, 라디오 버튼, 체크박스 등).
• <label> — 입력 필드와 연결된 요소로, 필드의 목적을 설명해줍니다.
• <textarea> — 여러 줄의 텍스트를 입력할 수 있는 필드야.
• <button> — 폼을 전송하거나 기타 작업을 수행하는 버튼이야.
• <select> 및 <option> — 드롭다운 리스트로, 사용자가 하나 또는 여러 옵션을 선택할 수 있어.

간단한 폼의 예

      
    <form action="/submit" method="post">
      <label for="name">이름:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">이메일:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">전송</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">전송</button>
</form>

• action은 <form>에서 폼 데이터가 전송될 URL을 정의해.
• method는 데이터 전송 방식을 지정해: post 또는 get.

HTML <input>

태그 <input>는 HTML 폼에서 가장 다양하게 사용될 수 있는 요소 중 하나야. 다양한 입력 타입을 지원하며, 각 타입은 특정 데이터 유형에 적합해.

태그 <input>의 문법:

<input type="타입" name="필드_이름" id="아이디" value="값">

<input type="타입" name="필드_이름" id="아이디" value="값">

<input>에서 사용하는 속성들:

• type — 입력 유형 (예: 텍스트, 비밀번호, 이메일 등).
• name — 서버가 데이터를 식별하는데 사용하는 필드 이름.
• id — 유니크 아이디로, <label>과의 연결에서 사용돼.
• value — 기본적으로 입력 필드에 표시되는 값 (예: 텍스트 필드의 기본 텍스트).

<input>의 주요 타입

• 텍스트 필드 type="text" — 이름이나 성과 같은 소량의 텍스트를 입력하는데 사용돼.
  HTML

        
          <label for="username">사용자 이름:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">사용자 이름:</label>
          <input type="text" id="username" name="username">
        
      
• 비밀번호 type="password" — 비밀번호를 입력하는데 사용돼. 입력한 문자는 점이나 별표로 표시돼.
  HTML

        
          <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password">
        
      

  HTML

        
          <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password">
        
      
• 이메일 type="email" — 이메일 주소를 입력하는데 사용돼. 유효한 형식인지 확인해줘.
  HTML

        
          <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">이메일:</label>
  <input type="email" id="email" name="email">