[HTML5]form 태그

입력 양식 태그에 대해 설명합니다

모든 포스트 목록

form element

사용자가 입력하는 정보를 애플리케이션에 전달한다

<form name="이름" method="get/post" action="애플리케이션 주소">

1. method 속성 : 데이터 전송 방식 지정

form 태그

<form> : <input>, <select> 상위 태그
<form action="주소" method="get or post">

• action 속성 : 입력할 데이터를 처리할 주소를 지정
• method 속성 - get : 입력한 데이터가 URL에 포함되어 전송
• method 속성 - post : 입력한 데이터가 눈에 보이지 않게 전송

입력 양식 태그

1. <input> : 사용자가 키보드로 입력할 수 있는 양식 태그
   
   1. type 속성 : text or password
      <input type="text or password" name="이름" maxlength="제한글자수" value="글자"
      • name 속성 : 입력 받은 값 구분
      • value 속성 : 텍스트박스에 미리 입력 받을 글자 지정
   2. type 속성 : checkbox
      <input type="checkbox" name="이름" [checked]>
      • checked 속성 : 웹페이지가 뜨자마자 체크 되어 있게끔 설정
   3. type 속성 : radio
      <input type="radio" name="이름">
      • 같은 선택 질문 하에 있는 선택지는 같은 name 값이여야 함
   4. type 속성 : button
      <input type="button" name="이름" value="값">
      • value 속성 : 버튼에 들어갈 단어
      • 전송 버튼은 type 속성 값을 submit으로 하여 사용 가능하다
      • 리셋 버튼은 type 속성 값을 reset으로 하여 사용 가능하다
   5. type 속성 : hidden
      <input type = "hidden" name="이름" value="값">
      • UI가 없지만 서버로 어떤 값을 전송하고 싶을 때 사용한다
      • value 속성 : 전송할 데이터
   6. size 속성
      입력 필드의 크기를 지정한다.
2. <select> : 여러 선택지 중에 하나를 선택하는 태그
   <select size="콤보 or 리스트">
   • size 속성 = "1" or 생략 : 콤보박스
     드롭다운으로 선택
   • size 속성 = "선택지 개수" : 리스트 박스
     모든 선택지를 한눈에 보면서 선택
   • 각 선택지는 <option> 태그를 이용하여 나타낸다

#html5 #입력양식
참고 : HTML5 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환
참고_form1   참고_form2   참고_size