[HTML] 실습

회원 가입 폼

회원 가입 폼 응용

정답보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 폼</title>
</head>
<body>
    <form action ="#">
        <table widty = "400px" >
            <tr bgcolor = "gray" height ="50px">
            <th colspan="2" align ="left">step1 : 아이디 / 비번 입력</th>
            </tr>

        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">아이디:</td>
            <td><input type="text"> </td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">비밀번호:</td>
            <td><input type="password"></td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">비밀번호 확인:</td>
            <td><input type="password"></td>
        </tr>
        <!--step2-->
        <tr bgcolor = "gray" height ="50px">
            <th colspan="2" align ="left">step2 : 개인정보 </th>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">성별:</td>
            <td align ="left">
                남 <input type="radio" name ="gender">
                여 <input type="radio" name ="gender"></td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">혈액형:</td>
            <td align ="left">
                <select>
                <option>A형</option>
                <option>B형</option>
                <option>AB형</option>
                <option>O형</option>
                </select> </td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">생일:</td>
            <td align ="left"><input type="date"></td>
        </tr>
        <!--step3-->
        <tr bgcolor = "gray" height ="50px">
            <th colspan="2" align ="left">step3 : 선호도 </th>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">취미:</td>
            <td >
                축구 <input type="checkbox">
                야구 <input type="checkbox">
                농구 <input type="checkbox"></td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="right">좋아하는 색깔:</td>
            <td align ="left"><input type="color"></td>
        </tr>
        <!--step4-->
        <tr bgcolor = "gray" height ="50px">
            <th colspan="2" align ="left">step4 : 적고 싶은 말 </th>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td colspan="2">
                <textarea rows="5" cols="57"></textarea>
            </td>
        </tr>
        <tr bgcolor ="whitesmoke" align="center">
            <td align ="center" colspan="2"><input type="submit" value = "제출">
            <input type="reset" value="초기화"></td>
        </tr>
    </table>


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

form은 데이터를 저장하는 필드 단위인가?

-데이터를 전송할 때 하나로 묶어주는 단위

-여러개 사용 가능하다. 단,submit버튼을 한번 클릭하게 되면 페이지가 변동된다. 즉, 한번 submit을 누르면 페이지를 벗어난다.

name => 중복사용 가능

id => 중복사용 불가능

티스토리툴바