2022 SW전문인재양성사업/웹 퍼블리싱

HTML5 기초 (4) - form, label, input, select 태그

마루설아 2022. 7. 26. 18:56
<!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>Document</title>
    <style>
        span {
            color: red;
        }
        th {
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>사람 정보 입력</h1>
    <form action="https://www.naver.com/" method="get">
        <table>
            <tr>
                <th><label for="name"><span>*</span>이름</label></th>
                <td><input type="text" id="name" name="name" value="" required></td>
            </tr>
            <tr>
                <th><label for="passwd"><span>*</span>비밀번호</label></th>
                <td><input type="password" id="passwd" name="passwd" value="" placeholder="4자 이상 입력" required></td>
            </tr>
            <tr>
                <th><label for="phone">핸드폰번호</label></th>
                <td><input type="text" id="phone" name="phone" value="" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{3,4}" maxlength="13"></td>
            </tr>
            <tr>
                <th>성별</th>
                <td>
                    <input type="radio" name="gender" value="M">남
                    <input type="radio" name="gender" value="F"checked>여
                </td>
            </tr>
            <tr>
                <th>취미</th>
                <td><input type="checkbox" name="hobby" value="영화감상">영화감상
                    <input type="checkbox" name="hobby" value="독서" checked>독서
                    <input type="checkbox" name="hobby" value="스포츠">스포츠</td>
            </tr>
            <tr>
                <th>지역</th>
                <td>
                    <select name="지역">
                        <option value="서울">서울</option>
                        <option value="서울">대구</option>
                        <option value="서울">부산</option>
                        <option value="서울">광주</option>
                        <option value="서울">인천</option>
                        <option value="서울">울산</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" value="저장">
                    <input type="reset" value="새로작성">
                </th>
            </tr>
        </table>
    </form>
</body>
</html>