HTML 폼 태그 (form tag)

폼 태그 (form tag)

• 웹페이지에서 입력 폼을 만들 때 사용하는 태그
• 사용자에게 정보를 받아주는 태그

 

① 필수 속성 : method(전달 방식), action(전달 위치)

 

② input 태그 : 사용자가 입력할 수 있는 공간

input 태그 속성
type	입력하는 값의 종류
name	입력한 값을 구분하기 위해 이름 지정
placeholder	미리보기 텍스트
value	기본 값 설정
readonly	읽기 전용 지정
maxlength	글자 수 제한 지정
autofocus	자동 커서 설정

 

<form method="get" action="#"></form>
        ID <input type="text" name="id" placeholder="아이디를 입력하시오." autofocus>
        PW <input type="password" name="pw" maxlength="10" >
        강의실 <input type="text" name="class" value="8강의실" readonly>
</form>

 

ID PW 강의실

 

 

③ input 태그 type 속성

 

input 태그 type 속성
text	문자 입력
password	암호화
checkbox	중복 선택 가능(name, value 필수)
radio	중복 선택 불가능(name, value 필수)
file	파일 선택
color	색깔 선택
number	숫자만 입력 가능
range	레인지 바
date	날짜 선택
datetime-local	날짜 + 시각 선택
submit	제출 버튼
reset	초기화 버튼

 

④ select 태그 : option 태그 필요

 

※ submit, reset 속성은 꼭 form 태그 내부 input 태그에 위치해야 한다.

(제출 및 초기화되는 정보는 form 태그 시작 ~ 끝)

 

<!-- (1) checkbox : 중복선택가능 -->
         <p>좋아하는 음료를 모두 고르시오</p>
         <input type="checkbox" name="fav" value="ia">아메리카노
         <input type="checkbox" name="fav" value="mc">민트초코
         <input type="checkbox" name="fav" value="vl">바닐라라떼


         <!-- (2) radio : 중복선택 불가능 -->
         <p>성별을 골라주세요</p>
         <input type="radio" name="gender" value="man">남성
         <input type="radio" name="gender" value="woman">여성

         <!-- (3) select
        => option이라는 태그가 필요 -->

         <p>이메일을 입력하시오.</p>
         <input type="text">
         @
         <select>
            <option>네이버</option>
            <option>다음</option>
            <option>구글</option>
         </select>
    
         <h3>그 외</h3>
         <input type="file">
         <br>
         <input type="color">
         <br>
         <input type="number">
         <br>
         <input type="range">
         <br>
         <input type="date">
         <br>
         <input type="datetime-local">

         <h3>제출 및 초기화</h3>
         <!-- ★★ 중요! ★★ 
        제출 및 초기화 버튼의 위치는 무조건 form 태그 내부
        제출 및 초기화되는 정보는 form태그 시작 ~ 끝
        -->
         <input type = "submit" value="보내기">
         <input type = "reset">

         
        
    </form>

 

좋아하는 음료를 모두 고르시오

아메리카노 민트초코 바닐라라떼

성별을 골라주세요

남성 여성

이메일을 입력하시오.

@ 네이버 다음 구글

그 외

제출 및 초기화

 

 

▶ 실습 회원가입 테이블 만들기

 

 

<form method="get" action="#">
        <table width="400px">
    
            <!-- Step 1 : 아이디/비번 입력 -->
            <tr height="50px" bgcolor="gray">
                <th colspan="2">Step 1 : 아이디/비번 입력</th>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">아이디</td>
                <td><input type="text" name="id"></td>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">비밀번호</td>
                <td><input type="password" name="pw"></td>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">비밀번호 확인</td>
                <td><input type="password" name="pw_check"></td>
            </tr>
    
            <!-- Step 2 : 개인정보 입력 -->
            <tr height="50px" bgcolor="gray">
                <th colspan="2">Step 2 : 개인정보</th>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">성별</td>
                <td>
                    <input type="radio" name="gender" value="man">남
                    <input type="radio" name="gender" value="woman">여
    
                </td>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">혈액형</td>
                <td>
                    <select name="bt">
                        <option>A형</option>
                        <option>B형</option>
                        <option>O형</option>
                        <option>AB형</option>
                    </select>
                </td>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">생일</td>
                <td>
                    <input type="date" name="bd">
                </td>
            </tr>
    
            <!-- Step 3 : 선호도 입력 -->
            <tr height="50px" bgcolor="gray">
                <th colspan="2">Step 3 : 선호도</th>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">취미</td>
                <td>
                    <input type="checkbox" name="hobby" value="sc">축구
                    <input type="checkbox" name="hobby" value="bs">야구
                    <input type="checkbox" name="hobby" value="bk">농구
                </td>
            </tr>
            <tr height="35px" bgcolor="whitesmoke">
                <td align="left">좋아하는 색깔</td>
                <td>
                    <input type="color" name="color">
                </td>
            </tr>
    
            <!-- Step 4 : 하고싶은 말 입력 -->
            <tr height="50px" bgcolor="gray">
                <th colspan="2">Step 4 : 하고싶은 말</th>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea cols="56" rows="5"></textarea>
                </td>
            </tr>
    
            <!-- 제출 및 초기화 -->
            <tr height="35px" bgcolor="whitesmoke">
                <td colspan="2" align="center">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
</form>