HTML만 사용해서 간단한 로그인 페이지를 구현 해보자.

<form> 태그를 사용하면 사용자가 입력한 정보를 한 번에 서버로 보낼 수 있다.

주로 로그인이나 사용자의 의견을 물어볼 경우 많이 사용된다.

<form> 태그 설명

https://www.w3schools.com/html/html_forms_attributes.asp

 

HTML Form Attributes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

위 사이트에 접속하면 예제와 속성을 확인할 수 있다.

1. 속성

⦁ action : 양식을 제출할 때 양식 데이터를 보낼 위치를 지정 (서버)

⦁ name : 폼을 식별하기 위한 이름을 지정

⦁ accept-charset : 폼 전송에 사용할 문자 인코딩

⦁ target : 현재 창이 아닌 다른 위치에 열도록 지정

⦁ method : 폼을 서버에 전송할 http 메서드를 지정 (GET / POST)

 

<audio> 태그

간단한 코드인데 생각보다 예쁘게 나와서 놀랐다.

음악파일 경로는 상대 경로, 절대 경로 중에 선택해서 넣으면 된다.

<audio align="center" autoplay controls>
    <source src="\마침표.mp3">
</audio>

 

⦁ controls : 뮤직 플레이어를 화면에 표시한다.

⦁ autoplay : 사이트에 접속하면 자동으로 재생한다.

 

HTML

<html>
    <head>
        <title>회원가입</title>
    </head>
    <body background="https://cdn.imweb.me/upload/S20200130a3018554a5004/a6f46584e7133.png">
        <br>
        <div align="center">
            <audio align="center" autoplay controls>
                <source src="\마침표.mp3">
            </audio>
        </div>
        <br><br>
        <form action="mailto:hk7286@nvaer.com?subject=안녕하세요">
            <table text-align="center" align="center" border="1" width="800" height="600" cellspacing="0">
                <tr>
                    <td bgcolor="#48dbfb" align="center" colspan="2" height="50"> <b>회원 기본 정보</b> </td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center" width="150">아이디:</td>
                    <td bgcolor="white"> <input type="text" size="20" name="id" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력 </td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">비밀번호:</td>
                    <td bgcolor="white"> <input type="password" size="20" name="pw" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력</td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">비밀번호확인:</td>
                    <td bgcolor="white"><input type="password" size="20" name="cpw"></td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">메일주소:</td>
                    <td bgcolor="white"><input type="email" size="30" name="mail"> 예) id@domain.com</td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">이름:</td>
                    <td bgcolor="white"><input type="text" size="30" name="name"></td>
                </tr>
                <tr>
                    <td bgcolor="#48dbfb" align="center" colspan="2" height="50"><B>개인 신상 정보</B></td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">주민등록번호:</td>
                    <td bgcolor="white"><input maxlength="13" type="text" size="30" name="num">예) 1234561234567</td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">생일:</td>
                    <td bgcolor="white">
                        <input type="text" size="8" name="year">년
                        <select name="month">
                            <option value = "1">1</option>
                            <option value = "2">2</option>
                            <option value = "3">3</option>
                            <option value = "4">4</option>
                            <option value = "5">5</option>
                            <option value = "6">6</option>
                            <option value = "7">7</option>
                            <option value = "8">8</option>
                            <option value = "9">9</option>
                            <option value = "10">10</option>
                            <option value = "11">11</option>
                            <option value = "12">12</option>
                        </select>월
                        <select name="day">
                            <option value = "1">1</option>
                            <option value = "2">2</option>
                            <option value = "3">3</option>
                            <option value = "4">4</option>
                            <option value = "5">5</option>
                            <option value = "6">6</option>
                            <option value = "7">7</option>
                            <option value = "8">8</option>
                            <option value = "9">9</option>
                            <option value = "10">10</option>
                            <option value = "11">11</option>
                            <option value = "12">12</option>
                            <option value = "13">13</option>
                            <option value = "14">14</option>
                            <option value = "15">15</option>
                            <option value = "16">16</option>
                            <option value = "17">17</option>
                            <option value = "18">18</option>
                            <option value = "19">19</option>
                            <option value = "20">20</option>
                            <option value = "21">21</option>
                            <option value = "22">22</option>
                            <option value = "23">23</option>
                            <option value = "24">24</option>
                            <option value = "25">25</option>
                            <option value = "26">26</option>
                            <option value = "27">27</option>
                            <option value = "28">28</option>
                            <option value = "29">29</option>
                            <option value = "30">30</option>
                            <option value = "31">31</option>
                        </select>일
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#c8d6e5" align="center">관심분야:</td>
                    <td bgcolor="white">
                        <input type="checkbox" name="computer" value="computer">컴퓨터&nbsp;&nbsp;
                        <input type="checkbox" name="net" value="net">인터넷&nbsp;&nbsp;
                        <input type="checkbox" name="trable" value="trable">여행&nbsp;&nbsp;
                        <input type="checkbox" name="movie" value="movie">영화감상&nbsp;&nbsp;
                        <input type="checkbox" name="music" value="music">음악감상&nbsp;&nbsp;
                    </td>
                </tr>
                <tr height="100">
                    <td bgcolor="#c8d6e5" align="center" rowspan="2">자기소개:</td>
                    <td bgcolor="white">
                        <textarea rows="10" cols="75" name="me"> </textarea>
                    </td>
                </tr>
            </table>
            <br>
            <div align="center">
                <input type="submit" width="30" value="회원 가입">
                <input type="reset" onclick="alert('초기화 했습니다.')" value="다시 입력">
            </div>
        </form>
    </body>
</html>

 

참고 문헌 :

 

'Front-End > HTML, CSS, JS' 카테고리의 다른 글

[CSS] Pretendard 숫자 데이터 고정폭 적용하기  (2) 2025.05.07
[JS] 회원가입 페이지 사용자 입력 유효성 검사 (정규식, 비정규식)  (0) 2022.09.14
[JS] 자바스크립트 공학용 계산기 만들기  (1) 2022.09.13
[JS] 자바스크립트 글자 미리보기 (String 메서드, getElementBy)  (0) 2022.09.08

티스토리툴바