[HTML] 2. HTML 실습

김주희

Mar 10, 2025

Contents

1. <form></from>2. HTML 예제

✏️

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

<form>

<input>

텍스트 입력

text
search
email
tel
url

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

<select>

<option>

1. <form></from>

입력 양식 전체를 감싼다. → form 태그 안에 필요한 모든 부품 삽입

1. 속성

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 = "myFrom">
		    여기에 입력 양식을 넣는다.
    </form>
</body>
</html>

2. 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 = "myFrom">
        <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 = > 집 <input type = "radio" name = "address type" value = "company">회사
            <input type = "text" name = address>
            <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>

가입하기 버튼 클릭 시 존재하지는 않지만 form 태그의 action 속성에서 지정해둔 example.php로 연결되는 것을 볼 수 있음

See more posts

[HTML] 2. HTML 실습

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

1. <form></from>

1. 속성

2. HTML 예제

문제 분석

코드 작성

More articles

[CSS] 4. CSS 선택자

[HTML] 3. 학교 시간표 만들기

[HTML] 1. HTML 기본

[DB] 9. 집합