미누에요

[HTML] 마라톤 등록 폼 만들기 본문

Web

[HTML] 마라톤 등록 폼 만들기

미누라니까요 2024. 1. 19. 20:22
728x90
반응형
SMALL

Udemy [The Web Developer 부트캠프 2024] 강의 중 섹션 5 : HTML: 폼과 테이블 _ 57. 마라톤 선수 등록 양식 만들기를 보고 만든 폼입니다.

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Race Registration</title>
</head>

<body>

    <h1>Race Registration!</h1>

    <form action="/race">
        <div>
            <label for="first">First Name:</label>
            <input type="text" name="first_name" id="first" required>

            <label for="last">Last Name:</label>
            <input type="text" name="last_name" id="last" required>
        </div>


        <p>Select a Race:</p>
        <div>
            <input type="radio" name="racetype" id="5km" value="5km" checked>
            <label for="5km">Fun Run 5k</label>
        </div>
        <div>
            <input type="radio" name="racetype" id="half" value="half">
            <label for="half">Half Marathon</label>
        </div>
        <div>
            <input type="radio" name="racetype" id="full" value="full">
            <label for="full">Full Marathon</label>
        </div>

        <div>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" required>
        </div>

        <div>
            <label for="age">Select Age Group</label>
            <select name="age" id="age">
                <option value="0to9">0-9</option>
                <option value="10to19">10-19</option>
                <option value="20to29">20-29</option>
                <option value="30to39">30-39</option>
                <option value="40to49">40-49</option>
                <option value="50to59">50-59</option>
                <option value="60to69">60-69</option>
                <option value="70to79">70-79</option>
                <option value="80to89">80-89</option>
                <option value="90to99">90-99</option>
            </select>
        </div>

        <button>Submit</button>

    </form>
</body>

</html>

 

 

결과

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

동기(Synchronous), 비동기(Asynchronous)란 ?  (0) 2024.05.07
[HTML/CSS] Flexbox 와 justify-content, align-items, div 정렬하기  (1) 2024.01.24
[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - float  (0) 2023.12.20
[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex  (1) 2023.12.20
[HTML/CSS] position : absolute , fixed  (1) 2023.12.17
'Web' Related Articles more