HTML Forms 표현 방법

입력, 선택, 업로드, 확인 등을 구현하는 것은 HTML을 배우는 마지막 단계입니다.

텍스트 상자(Text boxes) : 텍스트 및 암호 유형 input 요소.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Text and password inputs</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Text and Password</legend>
            <label for="username">Username:</label>
            <input name="username" id="username" value="Some Text">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="Password">
        </fieldset>
    </form>

</body>
</html>
확인란(Checkboxes) 및 라디오 버튼(Radio buttons) : input 요소 유형이 많습니다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Checkbox and radio inputs</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }

        label {
            float: left;
            width: 6em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Films you like</legend>
            <div>
                <label for="drama">Drama</label>
                <input type="checkbox" name="drama" id="drama" value="drama">
            </div>
            <div>
                <label for="action">Action</label>
                <input type="checkbox" name="action" id="action" value="action">
            </div>
            <div>
                <label for="comedy">Comedy</label>
                <input type="checkbox" name="comedy" id="comedy" value="comedy">
            </div>
            <div>
                <label for="horror">Horror</label>
                <input type="checkbox" name="horror" id="horror" value="horror">
            </div>
            <div>
                <label for="scifi">Sci-fi</label>
                <input type="checkbox" name="scifi" id="scifi" value="scifi">
            </div>
        </fieldset>

        <fieldset>
            <legend>Your age</legend>
            <div>
                <label for="lt20">19 or under</label>
                <input type="radio" name="age" id="lt20" value="lt20">
            </div>
            <div>
                <label for="20to39">20 to 39</label>
                <input type="radio" name="age" id="20to39" value="20to39">
            </div>
            <div>
                <label for="40to59">40 to 59</label>
                <input type="radio" name="age" id="40to59" value="40to59">
            </div>
            <div>
                <label for="gt59">60 or over</label>
                <input type="radio" name="age" id="gt59" value="gt59">
            </div>
        </fieldset>
    </form>

</body>
</html>
파일 입력(File input) : 업로드 용.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>File inputs</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }
    
        fieldset {
            padding: 0 1em 1em 1em;
        }
    
        legend {
            padding: 1em;
        }
    </style>
</head>
<body>

    <form action="someplace.php" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>Upload file</legend>
            <label for="uploadfile">File name: </label>
            <input type="file" name="uploadfile" id="uploadfile">
        </fieldset>
    </form>

</body>
</html>
텍스트 영역(Text areas) : textarea 요소입니다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Text areas</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }

        label {
            float: left;
            clear: left;
            width: 7em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Contact us</legend>
            <div>
                <label for="name">Name: </label>
                <input name="name" id="name">
            </div>
            <div>
                <label for="email">Email address: </label>
                <input name="email" id="email">
            </div>
            <div>
                <label for="message">Message: </label>
                <textarea rows="10" cols="40" name="message" id="message"></textarea>
            </div>
        </fieldset>
    </form>

</body>
</html>
선택 상자(Select boxes) : selectoption 요소의 기본 사용.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Select menus</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Favourite book</legend>
            <label for="book">Name: </label>
            <select name="book" id="book">
                <option>The Trial</option>
                <option>The Outsider</option>
                <option>Things Fall Apart</option>
                <option>Animal Farm</option>
            </select>
        </fieldset>
    </form>

</body>
</html>
선택 상자 옵션 그룹 : optgroup 요소 사용.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Select menus: option groups</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Favourite book</legend>
            <label for="book">Name: </label>
            <select name="book" id="book">
                <optgroup label="Camus">
                    <option>The Outsider</option>
                    <option>The Rebel</option>
                    <option>The Plague</option>
                </optgroup>
                <optgroup label="Orwell">
                    <option>Animal Farm</option>
                    <option>Nineteen Eighty-Four</option>
                    <option>Down and Out in Paris and London</option>
                </optgroup>
            </select>
        </fieldset>
    </form>

</body>
</html>
다중 선택 선택 상자 : multiple 속성 사용.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Select menus: multiple selections</title>
    <style>
        body {
            font: 100% arial, helvetica, sans-serif;
        }

        fieldset {
            padding: 0 1em 1em 1em;
        }

        legend {
            padding: 1em;
        }
    </style>
</head>
<body>

    <form action="someplace.php">
        <fieldset>
            <legend>Favourite book</legend>
            <label for="book">Name: </label>
            <select name="book" id="book" size="5" multiple="multiple">
                <option>The Outsider</option>
                <option>The Rebel</option>
                <option>The Plague</option>
                <option>Things Fall Apart</option>
                <option>Animal Farm</option>
                <option>Nineteen Eighty-Four</option>
                <option>Down and Out in Paris and London</option>
            </select>
        </fieldset>
    </form>

</body>
</html>

you're currently offline