[HTML] Form(폼) 태그와 Input 태그 사용법

<form> 태그

<form> 태그는 사용자의 입력을 받기 위한 HTML form을 만들 때 사용합니다. 

HTML form은

<input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>, <output>

과 같은 form elements를 포함합니다. 

 

 

<input> 태그

form 요소 중 하나인 <input> 태그는 실제로 사용자가 양식을 입력하기 위해 사용되는 태그입니다.

type 속성으로 입력받을 값의 종류를 정하고, name으로 데이터의 이름, value로 기본 값 설정을 할 수 있습니다.

 

type의 대표적인 속성 값들은 다음과 같습니다.

• text
  // 일반 문자
• password
  // 비밀번호
• button
  // 버튼
• submit
  // 양식 제출용 버튼
• reset
  // 양식 초기화용 버튼
• radio 선택1선택2
  // 한 개만 선택할 수 있는 컴포넌트
• checkbox 선택1선택2
  // 다수를 선택할 수 있는 컴포넌트
• file
  // 파일 업로드

• hidden // 사용자에게 보이지 않는 숨은 요소

 

 

예제: 간단한 양식 만들기

<form>
      <label for="name">아이디</label>
      <input type="text" name="name" value="아이디 입력"><br>
 
      <label for="password">비밀번호</label>
      <input type="password" name="password" value="비밀번호 입력"><br>
 
      <label for="gender">성별</label>
      <input type="radio" name="gender" value="M">남자
      <input type="radio" name="gender" value="F">여자<br>
 
      <input type="submit">
</form>