HTML 05. 입력양식 및 폼 관련 태그(1)

1. 입력양식 관련 태그 

- <input> 태그  : 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등을 만들 수 있음 

아이디 : 
    <input type="text"><br>
비밀번호 : <input type="password"> <br>
    
성별 : <input type="radio">여 <input type="radio">남 
    <br>

<input type="submit" value="회원가입">

아이디 :
비밀번호 :
성별 : 여 남

 

---

2. 폼 관련 태그 

-<form> 태그 내에 submit 버튼 클릭시 해당 form안에 작성된 사용자가 입력한 값들을 서버로 전송하면서 요청하는 역할 수행 

<form action ="서버 경로"  method="전송방식">
- action :  해당 form에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시 
- method :  요청 전송방식을 지정하는 속성 (get(기본값) | post)
                > get 방식: 사용자가 입력한 값들이 요청시 url에 노출되는 방식 / 전달값에 대한 크기제한있음
                > post방식: 사용자가 입력한 값들이 요청시 url에 노출되지 않는 방식 / 크기제한 없음

>> 사용자가 입력한 값들을 항상 key=value세트로 전달 

 <form action="search.do" method="get"> <!--검색기능은 get방식 많이 씀-->
    검색어 : <input type="text" name="keyword"> 
    <input type="submit" value="검색">
 </form>

검색어 :

---

* fielset : 그룹을 묶는 태그
* legend : 해당 그룹의 제목을 붙이는 태그 

 <fieldset>
        <legend>제목</legend>
        안녕하세요<br>
        반갑습니다.
 </fieldset>

제목

안녕하세요
반갑습니다.

 

 

* form 태그 안에 fieldset 작성

<form action="test.do">
        <fieldset>
            입력 1 : <input type="text" name ="text1"> <br>
            입력 2 : <input type="text" name="text2"> 
            <legend>제목1</legend>
        </fieldset>

        <fieldset>
            <legend>제목2</legend>
            입력 3 : <input type="text" name="text3"><br>
            입력 4 : <input type="text" name="text4">
        </fieldset>
        <input type="submit">
</form>

입력 1 :
입력 2 :

제목1

제목2

입력 3 :
입력 4 :