HTML Form 태그

Form tag

• 사용자로부터 어떠한 정보를 받고 싶을 때 사용
• 숙박부, 주문양식, 설문조사, 피드백 등을 위해 활용될 수 있음

Form tag의 양식

• <form>: form의 시작을 알리는 tag
• <input>: 다양한 방법 중 하나로 정보를 질의
• </form>: form의 끝을 알리는 tag

---

Form 기본 태그

• <form action=“주소”>
  • form 태그 열기
  • form 통해 실행하고자 하는 액션
• <input name="이름" type="종류">
  • 입력할 수 있는 영역
  • name 속성으로 이름 설정
  • type 속성으로 텍스트박스 생성
• <input type=“submit”>
  • 텍스트 박스 입력 내용을 전송하기 위한 버튼

input type 속성

• text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
• button : 버튼을 만들어 클릭했을 때 이벤트를 발생시킬 수 있음
• checkbox : 여러 개의 선택지를 선택할 수 있는 입력 요소
• radio : 라디오 버튼 (1개만 선택 가능)
• password : 비밀번호 입력 필드
• color : 색상표
• date : 사용자 지역을 기준으로 한 날짜(연, 월, 일)
• file : 파일을 첨부할 수 있는 버튼
• number : 숫자를 조절할 수 있는 화살표

<select>

<select name="이름">

• name 속성으로 이름 설정 가능

<option value="이름">

• 선택할 수 있는 속성 추가 태그
• value 속성을 통해 속성 이름 부여

예시

<form>
  당신이 좋아하는 과일은?<br>
<select name="fruits">
  <option value="peach">복숭아</option>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="lemon">레몬</option>
 </select>
<input type="submit">
</form> </body> </html>

<textarea>

여러 줄의 텍스트를 입력받을 수 있음

• <textarea name="이름">
  • 이름 설정 가능
• <textarea rows="숫자" cols="숫자">
  • 크기 설정 가능

<button>

버튼을 생성

<button type="button" onclick="alert('클릭 성공!')">클릭해주세요!!</button>

정리글 추천>>
https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC