HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 1] <form> fieldset/legend, textarea, select

1. form

사용자가 입력한 데이터를 처리하는 프로그램으로 전송할 때 사용하는 태그 (사용자 입력 데이터 수집)

속성	설명
action	입력 데이터(form data)가 전송될 URL
method	입력 데이터(form data) 전달 방식

method 속성
GET 방식	POST 방식
전송 URL 뒤에 데이터가 노출되기 때문에 주로 '검색'에 쓰임.	URL 전송 데이터 노출되지 않지만 GET에 비해 속도가 느리다. 주로 '로그인', '회원가입'에 쓰임.

2. fieldset / legend

<fieldset> : 양식 요소들을 그룹화 할때 사용

<legend> : 그룹화된(fieldset) 서식의 제목을 정의.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>폼 form, fieldset/legend</title> 
</head> 
<body> 
      <h3>form method get 방식</h3> 
       <form action="#" method="get"> 
           검색 : <input type="search"> 
       </form> 
       <h3>form method post 방식</h3> 
       <form action="#" method="post"> 
           ID : <input type="text"> 
           PW : <input type="password"> 
       </form> 
       <h3>fieldset/legend</h3> 
       <form action="#" method="post"> 
           <fieldset> 
               <legend>로그인</legend> 
               <p>ID : <input type="text"></p> 
               <p>PW : <input type="password"></p> 
           </fieldset> 
       </form> 
</body> 
</html>

form method get 방식

form method post 방식

fieldset/legend

3. textarea, select

<textarea> : 여러 줄 텍스트 입력 상자

<seclet> : 선택 목록 상자

tag	설명
textarea	여러 줄 텍스트 입력 상자 rows, cols 속성으로 행과 열 수를 지정
seclet	선택 목록 상자
option	선택 할 옵션(종류) selected 속성을 정의하면 기본 선택자로 표시됨
otpgroup	option 그룹화

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>폼 textarea, select</title> 
</head> 
<body> 
   <form action="#" method="post">

      <fieldset>
       <legend>회원가입</legend> 
           <p>가입 목적 :<br><textarea cols="70" rows="3"></textarea></p> 
           <p>전화 번호 : 
               <select> 
                   <option selected>지역번호</option> 
                   <option>02</option> 
                   <option>031</option> 
                   <option>032</option> 
                   <option>033</option> 
                   <option>044</option> 
               </select> 
               - <input type="text"></p>

        </fieldset>
   </form> 
</body> 
</html>

폼 textarea, select

저작자표시

'HTML' 카테고리의 다른 글

HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 3] <form> label (0)	2020.08.01
HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input (0)	2020.08.01
HTML5 Tag-Table [표태그] (0)	2020.07.29
HTML5 Tag-List [목록태그] (0)	2020.07.27
HTML5 Tag-Text [본문태그] (0)	2020.07.23

Hrin

HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 1] <form> fieldset/legend, textarea, select

1. form