[HTML/CSS] 2. HTML 실습

문정준

Mar 06, 2025

Contents

HTML 예제

✏️

입력 양식을 사용하여 실제 페이지를 제작해보기

<form>

<input>

텍스트 입력

text
search
email
tel
url

라디오 버튼
체크박스
전송 버튼

<select>

<option>

<form></form> : 입력 양식란 제작

입력 양식 안에서 사용하는 모든 부품들을 form 태그 내에 삽입

action : 데이터의 전송 대상 페이지 지정
method : 데이터 전송 방법 지정 ( 주로 get, post )
name : 입력 양식의 이름


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="example.php" method="post" name="myForm">
        여기에 입력 양식을 넣습니다.
    </form>
</body>
</html>

HTML 예제

홈페이지 방문자의 정보를 입력받을 수 있는 간이 회원가입 페이지 양식을 만들어 보자.

문제 분석

비즈니스 파악

이름 입력
주민등록번호 입력

뒷 7자리는 안 보이도록

아이디 입력
비밀번호 입력

비밀번호 확인용 칸도 추가

전화번호
이메일

텍스트 + 목록 형태로

주소

직장 혹은 자택 선택 버튼

직업

목록 중에서 선택

약관 동의

약관은 임의로 텍스트 박스로 설정

회원가입 버튼

코드 작성


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>회원가입</h1>
    <hr>
    <form action="example.php" method="post" name="myForm">
        <div>
            이름 : <input type="text" name="name">
        </div>
        <div>
            주민등록번호 : <input type="text" name="jumin">-<input type="password" name="jumin2">
        </div>
        <div>
            아이디 : <input type="text" name="id">
        </div>
        <div>
            비밀번호 : <input type="password" name="pw">
        </div>
        <div>
            비밀번호 확인 : <input type="password" name="pw2">
        </div>
        <div>
            전화번호 : <input type="tel" name="tel">
        </div>
        <div>
            이메일 : <input type="text" name="email">@ <select name="email2">
                <option value="naver.com">naver.com</option>
                <option value="gmail.com">gmail.com</option>
                <option value="hanmail.net">hanmail.net</option>
                <option value="nate.com">nate.com</option>
            </select>
        </div>
        <div>
            <h3>주소</h3> <input type="radio" name="address_type" value="home"> 집 <input type="radio" name="address_type" value="company"> 회사
            <input type="text" name="zipcode">
            <input type="button" value="우편번호 검색">
            <div>
                <input type="text" name="address">
                <input type="text" name="address2">
            </div>
        </div>
        <div>
            직업 : <select name="job">
                <option value="학생">학생</option>
                <option value="회사원">회사원</option>
                <option value="주부">주부</option>
                <option value="기타">기타</option>
            </select>
        </div>
        <div>
            <h4>약관</h4>
            <textarea name="agreement" cols="30" rows="10">test</textarea>
        </div>
        <div>
            <input type="submit" value="가입하기">
            <input type="reset" value="다시작성">
        </div>
    </form>
</body>
</html>

Contents

HTML 예제

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="example.php" method="post" name="myForm"> 여기에 입력 양식을 넣습니다. </form> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>회원가입</h1> <hr> <form action="example.php" method="post" name="myForm"> <div> 이름 : <input type="text" name="name"> </div> <div> 주민등록번호 : <input type="text" name="jumin">-<input type="password" name="jumin2"> </div> <div> 아이디 : <input type="text" name="id"> </div> <div> 비밀번호 : <input type="password" name="pw"> </div> <div> 비밀번호 확인 : <input type="password" name="pw2"> </div> <div> 전화번호 : <input type="tel" name="tel"> </div> <div> 이메일 : <input type="text" name="email">@ <select name="email2"> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> <option value="hanmail.net">hanmail.net</option> <option value="nate.com">nate.com</option> </select> </div> <div> <h3>주소</h3> <input type="radio" name="address_type" value="home"> 집 <input type="radio" name="address_type" value="company"> 회사 <input type="text" name="zipcode"> <input type="button" value="우편번호 검색"> <div> <input type="text" name="address"> <input type="text" name="address2"> </div> </div> <div> 직업 : <select name="job"> <option value="학생">학생</option> <option value="회사원">회사원</option> <option value="주부">주부</option> <option value="기타">기타</option> </select> </div> <div> <h4>약관</h4> <textarea name="agreement" cols="30" rows="10">test</textarea> </div> <div> <input type="submit" value="가입하기"> <input type="reset" value="다시작성"> </div> </form> </body> </html>