[HTML5] <form> 태그와 관련 태그, 속성들

form 기본

form 관련 태그들 중 최상위 태그

폼 관련 태그들이 제대로 실행 되려면 form 태그를 반드시 작성해야 함

 

"method"="get"

• 간단한 데이터 전송시 사용.

"method"="post"

• http 헤더에 숨겨져 서버로 전송. 일정 크기 이상의 데이터 전송시 사용. 
• 데이터가 주소 입력란에 표시되지 않아 보안 유지

action="정보를 전송할 서버 주소"

---

다양한 폼 관련 태그들

인라인 요소로 폼 안의 기본적인 필드 값을 만들 때 사용. 빈요소

 

input 요소의 type 속성 값에 따라 역할이 달라짐.

• name="데이터 이름"
• maxlength="value 최대길이 (문자수)"
• minlength="value 최소길이 (문자수)"

 

• placeholder="컨트롤 박스 안의 힌트"
• required="필수 항목 지정. form 태그가 반드시 작성되어있어야 실행"

required

• value="입력값 혹은 출력값. 전송되는 값"
• autofocus="자동 포커스"
• checked="체크 박스의 자동 선택"
• disabled="비활성화"

---

type="text" / type="password"

 

  <form action="">
     <section>
     <h3>type="text" / type="password"</h3>
     사용자명 : 
     <input type="name" name="user_name" id="userName" maxlength="8" 
     placeholder="이곳에 이름을 작성하세요" minlength="2"><br>
     비밀번호 : <input type="password" name="user_pw" 
     id="userPw" minlength="5" placeholder="이곳에 비밀번호를 입력하세요">
     </section>
  </form>

 

password는 브라우저마다 다르게 보일 수 있음.

 

 

---

type="submit" / type="reset" / type="button"

     <input type="submit" name="submit">
     <input type="submit" name="submit" value="확인">
     <input type="reset" name="reset" value="취소">
     <input type="button" value="버튼">

 

버튼은 브라우저마다 다르게 보일 수 있음.

---

textarea - 여러줄의 텍스트 박스

     <section>
      <h3>여러 줄의 텍스트 박스</h3>
      <textarea name="txtBox" id="txtBox" cols="30" rows="10">인라인. 이 안에 글 작성시 박스 안에 출력
      </textarea>
     </section>

textarea

 

---

type="radio"

 

• 하나의 값만 선택 가능.
• name 속성은 반드시 같아야 함.

<section>
 <h3>라디오 버튼</h3>
 <p>하나의 값만 선택 가능. <strong>name 속성은 반드시 같아야 함.</strong></p>
 	<input type="radio" name="choice" value="선택1">선택1
 	<input type="radio" name="choice" value="선택2">선택2
 	<input type="radio" name="choice" value="선택3">선택3
 	<input type="radio" name="choice" value="선택4">선택4
</section>

type="radio"

• checked 속성을 사용하면 체크박스를 기본적으로 활성화시켜 놓을 수 있다.

---

type="checkbox"

• 여러개의 값 선택 가능.
• name 속성은 반드시 같아야 함.

 <input type="checkbox" name="decide" value="선택1">선택1
 <input type="checkbox" name="decide" value="선택2">선택2
 <input type="checkbox" name="decide" value="선택3">선택3
 <input type="checkbox" name="decide" value="선택4">선택4

type="checkbox"

---

<select name="" id="">

• 드롭다운 형태의 메뉴
• 반드시 하나의 option이 있어야 함.
• selected 속성을 이용해 기본값으로 선택될 옵션을 설정할 수 있다.

<section>
 <h3>드롭다운 형태의 메뉴</h3>
 <select name="menu">
   <option value="선택1">선택1</option>
   <option value="선택2">선택2</option>
   <option value="선택3" selected>선택3</option>
   <option value="선택4">선택4</option>
   <option value="선택5">선택5</option>
 </select>
</section>

select

---

type="file"

• 파일 첨부 버튼
• 브라우저에 따라 다르게 보일 수 있음.
• 전송 버튼이 없으면 첨부만 될 뿐 서버로 전송되지는 않음.
• accept 속성으로 첨부할 파일의 확장자를 특정할 수 있음.

accept 속성

<section>
 <h3>파일 첨부 버튼</h3>
 <input type="file" name="user_file" accept=".jpg, .png, .pdf">
 <br>
 <button type="submit">전송</button>
 <button type="reset">취소</button>
</section>

type="file"

---

HTML5에서 새로 정의된 태그들

• type="date"
• type="email"
• type="url"
• type="search"
• type="range"
• type="number"

<section>
 <h3>html5에서 새로 정의된 태그들</h3>
 <p>
   날짜 <input type="date" name="yymmdd">
 </p>
 <p>
   이메일 <input type="email" name="email>
 </p>
 <p>
   url <input type="url" name="url">
 </p>
 <p>
   검색 <input type="search" name="search">
 </p>
 <p>
   범위 설정 <input type="range" name="range">
 </p>
 <p>
   숫자 <input type="number" name="number">
 </p>
</section>

브라우저에 따라 다르게 보일 수 있음