HTML 폼태그와 입력요소들

폼(Form) 태그와 입력 요소

웹페이지에서 사용자로부터 정보를 입력받고 서버로 전송할 때 사용하는 것이 <form> 입니다. 로그인, 회원가입, 검색창, 설문조사 등이 모두 폼을 이용해서 만들어집니다.

(1) 기본 구조

• <form> : 폼 전체를 감싸는 태그
• action : 입력값을 보낼 서버 주소
• method : 전송 방식 (GET, POST)

<form action="/submit" method="post">
  
</form>
  

(2) 주요 입력 태그와 속성

• <input type="text"> : 한 줄 텍스트 입력
• <input type="password"> : 비밀번호 입력(●●●)
• <input type="radio"> : 여러 옵션 중 하나만 선택
• <input type="checkbox"> : 여러 개 선택 가능
• <input type="email"> : 이메일 형식 체크
• <input type="number"> : 숫자만 입력
• <input type="submit"> : 전송 버튼
• <textarea> : 여러 줄 텍스트 입력
• <select><option> : 드롭다운 목록

(3) 예제 코드

<form action="/submit" method="post">
  이름: <input type="text" name="username" placeholder="이름을 입력하세요"><br><br>

  비밀번호: <input type="password" name="password"><br><br>

  성별:
  <input type="radio" name="gender" value="male"> 남자
  <input type="radio" name="gender" value="female"> 여자<br><br>

  취미:
  <input type="checkbox" name="hobby" value="sports"> 운동
  <input type="checkbox" name="hobby" value="music"> 음악
  <input type="checkbox" name="hobby" value="game"> 게임<br><br>

  이메일: <input type="email" name="email"><br><br>

  나이: <input type="number" name="age" min="1" max="100"><br><br>

  자기소개:<br>
  <textarea name="intro" rows="4" cols="40"></textarea><br><br>

  지역:
  <select name="city">
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
    <option value="daegu">대구</option>
  </select><br><br>

  <input type="submit" value="제출하기">
</form>
  

(4) 실행 화면

이름:

비밀번호:

성별: 남자 여자

취미: 운동 음악 게임

이메일:

나이:

자기소개:


지역: 서울 부산 대구