IT Cookbook, HTML5 프로그래밍 입문 (3판)

4장 HTML5 입력 양식 태그와 구조화 태그

기본예제 4-1 기본 입력 양식 태그

98페이지

코드 4-1 form_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <form>
        <!-- 사용자가 입력하는 입력 양식 -->
        <input type="text" name="text" value="text"><br>
        <input type="password" name="password" value="password"><br>
        <input type="file" name="file" value="file"><br>
        <input type="checkbox" name="checkbox" value="checkbox"><br>
        <input type="radio" name="radio" value="radio"><br>

        <!-- 보이지 않는 입력 양식 -->
        <input type="hidden" name="hidden" value="hidden"><br>

        <!-- 버튼 -->
        <input type="button" value="button"><br>
        <input type="reset" value="reset"><br>
        <input type="submit" value="submit"><br>
        <input type="image" src="https://placehold.it/100x100">
    </form>
</body>
</html>

기본예제 4-2 간단한 입력 양식 생성

99페이지

코드 4-3 form_radio.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td><label for="username">이름</label></td>
                <td><input id="username" type="text" name="username"></td>
            </tr>
            <tr>
                <td>성별</td>
                <td>
                    <input id="man" type="radio" name="gender" value="m">
                    <label for="man">남자</label>
                    <input id="woman" type="radio" name="gender" value="w">
                    <label for="woman">여자</label>
                </td>
            </tr>
        </table>  
        <input type="submit" value="가입">
    </form>
</body>
</html>

기본예제 4-3 선택 가능한 입력 양식

100페이지

코드 4-4 form_selectBasic.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <select>
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>
</body>
</html>
코드 4-5 form_selectMulti.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <select multiple="multiple">
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>
</body>
</html>
코드 4-6 form_selectGroup.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <select>
        <optgroup label="HTML5">
            <option>Multimedia Tag</option>
            <option>Connectivity</option>
            <option>Device Access</option>
        </optgroup>
        <optgroup label="CSS3">
            <option>Animation</option>
            <option>3D Transform</option>
        </optgroup>
    </select>
</body>
</html>

기본예제 4-4 연관 있는 입력 양식 그룹으로 묶기

103페이지

코드 4-7 form_group.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>입력 양식</legend>
            <table>
                <tr>
                    <td><label for="name">이름</label></td>
                    <td><input id="name" type="text"></td>
                </tr>
                <tr>
                    <td><label for="mail">이메일</label></td>
                    <td><input id="mail" type="email"></td>
                </tr>
            </table>
            <input type="submit">
        </fieldset>
    </form>
</body>
</html>

textarea 태그 주의 사항

104페이지

코드 4-8 reference_textarea.html
<!DOCTYPE html>
<html>
<head>
    <title>Form Basic</title>
</head>
<body>
    <h4>잘못된 형태</h4>
    <textarea>
        Textarea 태그
        Textarea 태그
    </textarea>
    <h4>올바른 형태</h4>
    <textarea>Textarea 태그
Textarea 태그</textarea>
</body>
</html>

기본예제 4-5 공간 분할 방법

106페이지

코드 4-9 space_block.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Space Basic Page</title>
</head>
<body>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
</body>
</html>
코드 4-9 space_inline.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Space Basic Page</title>
</head>
<body>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
</body>
</html>

기본예제 4-6 시맨틱 태그를 사용한 레이아웃 구성

코드 4-13 space_semanticLess.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Space Basic Page</title>
</head>
<body>
    <div>
        <h1>HTML5 기본</h1>
    </div>
    <div>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </div>
    <div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
        </div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
        </div>
    </div>
    <div>
        <span>서울특별시 강서구 내발산동</span>
    </div>
</body>
</html>

112페이지

코드 4-13 space_semantic.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Space Basic Page</title>
</head>
<body>
    <header>
        <h1>HTML5 기본</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
        </article>
    </section>
    <footer>
        <address>서울특별시 강서구 내발산동</address>
    </footer>
</body>
</html>

← 5장 →