05. HTML 폼(Form) 관련 태그들

○ 폼(Form)

    - 폼(Form) : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소

                    사용자가 입력한 값을 전송해 준다 (e.g. 로그인창, 회원가입창, 검색창 등)

    - 사용자가 입력한 정보는 <form> 단위로 서버로 전송된다

    - 폼을 만드는 태그 : <form> </form>

    - 폼 태그 안에 또 다른 폼 태그가 올 수 없다 ( <form><form></form></form> → 잘못된 경우 )

    - <form>태그 안에 여러 폼 컨트롤 요소를 넣어준다

 

○ 폼 관련 속성들

    - id="폼아이디" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Frontend단에서 접근시 사용)

    - name="폼이름" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Backend단에서 접근시 사용)

    - method="post/get" : 전송방식 (post : 전송내용이 URL에 드러나지 않음 / get : 전송내용이 URL에 드러남)

    - action="프로그램명" : 사용자가 입력한 정보를 처리해 줄 서버 상의 프로그램 지정

<form id="bbsfrm" name="bbsfrm" method="post" action="ok.jsp">

</form>

 

○ 다양한 폼 컨트롤 요소들

    - <input> : 사용자가 입력할 부분은 주로 <input> 태그를 이용해 넣는다 (닫는 태그 없음)

        ① type="button" : 버튼

        ② type="submit" : 서버 전송 버튼

        ③ type="reset" : 리셋 버튼

        ④ type="radio" : 라디오 버튼 (항목 중 1개만 선택 가능)

        ⑤ type="checkbox" : 체크박스 (항목에서 2개 이상도 선택 가능)

 

<input type="button" value="로그인">    <!--value='버튼에 나오게 할 내용'-->
<input type="submit" value="전송">
<input type="reset" value="취소">
<input type="radio">라디오
<input type="checkbox">체크박스

 

라디오 체크박스

 

        ⑥ type="text" : 텍스트 상자 (한 줄 짜리)

        ⑦ type="password" : 비밀번호 입력상자 (text와 비슷한데 입력한 내용이 *로 나옴)

       

<input type="text" placeholder="텍스트입력해주세요" >              
<input type="password" placeholder="비밀번호입력해주세요">

 

 

        ⑧ autofocus : 입력 커서가 기본적으로 들어가는 곳 표시 

        ⑨ required : 반드시 입력해야 하는 필드

        ⑩ placeholder : 텍스트 입력 시 도움되는 사항 ( e.g. 비밀번호 길이 힌트)

        ⑪ readonly : 읽기 전용 ( e.g. 우편번호 입력란)

        ⑫ size, minlength , maxlength : 길이, 최소길이, 최대 길이

 

<input type="password"
        id="userpw" 
        name="userpw"
        size="20"
        maxlength="12"                                   
        placeholder="최대 12글자 비밀번호입력"
        required="required"
        autofocus>
            
 <input type="text" 
        size="5" 
        readonly>

 

 

        ⑬ 그 외 <input> 태그의 type : number (숫자조절 화살표), range (숫자조절 막대), color(색상표), 

                                                       month, week, date, time (날짜시간관련), email (이메일),

                                                       search (검색상자), tel (전화번호), url (url)

 

 

    - 여는 태그와 닫는 태그가 있는 폼 컨트롤 요소

        ① <button><button> : type="submit" + "button"

        ② <select></select> : 드랍다운 목록 만들기, 목록은 <option> 안에 넣어줌

 

태어난 년도:
<select id="birthyear" name="birthyear">
    <option value="2023">2023</option>
    <option value="2022">2022</option>
    <option value="2021">2021</option>
    <option value="2020" selected>2020</option>    <!-- selected가 들어간 값이 선택된 상태로 나온다-->     
    <option value="2019">2019</option>              
</select>

 

태어난 년도: 2023 2022 2021 2020 2019

 

        ③ <textarea></textarea> : 여러 줄을 입력하는 텍스트 영역 (<text>와 비교해보기)

 

<textarea cols="50" rows="3"> 텍스트를 입력해 주세요 </textarea>

 

텍스트를 입력해 주세요