습관제작소

22-06-10 Smart HTML/CSS 본문

SMHRD or ITSchool/HTML and CSS

22-06-10 Smart HTML/CSS

KUDO 2022. 6. 11. 14:16

HTML

- select 태그

<!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>
</head>
<body>
    <select>
        <option>선택하세요</option>
        <option value = "naver">naver.com</option>
        <option value = "duum">daum.net</option>
    </select>

    <!-- 글자를 적을 수 있는 공간 만들기 -->
    <textarea cols = '50' rows="3">

    </textarea>
</body>
</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>Document</title>


</head>

<body>
    <table width="400px">

        <!-- 1.아이디/비번 -->

        <tr bgcolor="gray" height="50px">
            <!-- 설명이 들어가는 칸 (제목) -->
            <th colspan="2">Step 1 : 아이디/비번 입력</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 아이디 입력 칸 -->
            <td>아이디 : </td>
            <td><input type="text"></td>
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 비밀번호 입력 칸 -->
            <td>비밀번호 : </td>
            <td><input type="password"></td>
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 비밀번호를 확인하는 칸 -->
            <td>비밀번호 확인 : </td>
            <td><input type="password"></td>
        </tr>

        <!--2.개인정보 -->

        <tr bgcolor="gray" height="50px">
            <!-- 제목-->
            <th colspan="2">Step 2 : 개인정보</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 성별 -->
            <td>성별 : </td>
            <td>
                <span>남</span><input type="radio" name="gender">
                <span>여</span><input type="radio" name="gender">
            </td>
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 혈액형 -->
            <td>혈액형 : </td>
            <td>
                <select>
                    <option value="A형">A형</option>
                    <option value="B형">B형</option>
                    <option value="O형">O형</option>
                    <option value="AB형">AB형</option>
                </select>
            </td>
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 생일 -->
            <td>생일 : </td>
            <td><input type="date"></td>
        </tr>

        <!-- 3.선호도 -->

        <tr bgcolor="gray" height="50px">
            <!--  (제목) -->
            <th colspan="2">Step 3 : 선호도</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!-- 취미 -->
            <td>취미 : </td>
            <td>
                <span>축구</span><input type="checkbox" name="hobby">
                <span>야구</span><input type="checkbox" name="hobby">
                <span>농구</span><input type="checkbox" name="hobby">
            </td>
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <!--색깔 -->
            <td>좋아하는 색깔 : </td>
            <td><input type="color"></td>
        </tr>

        <!--4.적고싶은말 -->
        <tr bgcolor="gray" height="50px">
            <!--  (제목) -->
            <th colspan="2">Step 4 :적고 싶은 말</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr bgcolor="whitesmoke" height="35px">
            <td colspan="2">
                <textarea cols='60' rows="3">

                </textarea>
            </td>
        </tr>
        <td bgcolor="whitesmoke" colspan="2" align="center"><input type="submit"> <input type="reset"></td>
    </table>


</body>

</html>

'SMHRD or ITSchool > HTML and CSS' 카테고리의 다른 글

22-06-15 Smart HTML/CSS  (0) 2022.06.15
22-06-14 Smart HTML/CSS  (0) 2022.06.14
22-06-16 Smart HTML/CSS  (0) 2022.06.11
22-06-09 Smart HTML/CSS  (0) 2022.06.09
22-06-08 Smart HTML/CSS  (0) 2022.06.08
Comments