반응형
목표: 회원가입 페이지를 구성하고 싶다
이전 게시글 에서는 HTML에 FORM 이라는 태그에 대해 소개했다.
Form은 여러개의 컨트롤 요소들이 있고,
이 컨트롤 요소들을 조합해서 하나의 HTML 파일을 완성할 수 있다.
그럼 다양한 컨트롤 요소를 가지고,
아주 간단한 회원 가입 페이지를 만들어 보자.
컨트롤 요소 구성하기
데이터베이스나 서버로 연결하는 것은 나중에 생각하고,
정말정말 기본적인 회원가입 페이지를 구성하고 싶다.
Form에 어떤 컨트롤 요소(control elements)가 필요할까?
모든 일의 시작과 기본은 구성하기 라고 생각한다!! 👍
예를 들어, 위와 같은 내용으로 회원가입 페이지를 구성하고 싶다면,
이 페이지에서 어떤 폼 컨트롤 요소가 사용되었는지 살펴보자.
- Email Input element
- Password Field
- Text Field
- Month Input element
- Radio buttons
- Chectboxes
- Submit button
- Textarea
이 정도의 컨트롤 요소를 사용하고 있는 것 같다.
간추려 보자면 이런 식이다.
style="display:inline-block;width:740px;height:200px"
data-ad-client="ca-pub-9512983930357661"
data-ad-slot="5785466884">
위의 구성도를 기반으로 급하게 만들어본 결과는 아래와 같다. 😒
완전 마음에 쏙 들지는 않지만, 구상한대로라면 성공이다!
아래에 html 파일을 업로드하니, 참고하기 바란다.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<link rel='stylesheet' href='stylesforform.css'/>
<title>Make a Form 💌</title>
</head>
<body>
<header class='form-header'>
<h1>Hello World 🎈</h1>
<p>Create a New Accout</p>
</header>
<form class='form-row'>
<div>
<label for='full-name'>Name</label>
<input id='full-name' name='full-name' type='text'/>
</div>
<div>
<label for='email'>Email</label>
<input id='email'
name='email'
type='email'
placeholder='sunny@example.com'/>
</div>
<div class='month-form-row'>
<label for='birth_month'>Date of birth</label>
<select name="Month">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<input type='text' id='birth_month'>
</div>
<div>
<fieldset class='legacy-form-row'>
<input id='gender-type-1'
name='gender-type'
type='radio'
value='Male' />
<label for='gender-type-1' class='radio-label'>Male</label>
<input id='gender-type-2'
name='gender-type'
type='radio'
value='Female'
checked />
<label for='gender-type-2' class='radio-label'>Female</label>
<input id='gender-type-3'
name='gender-type'
type='radio'
value='No-binary'
checked />
<label for='gender-type-3' class='radio-label'>No-binary</label>
</fieldset>
</div>
<div>
<label class='checkbox-label' for='available'>
<input id='available'
name='available'
type='checkbox'
value='is-available'/>
<span>I’m actually not a ROBOT</span>
</label>
</div>
<div>
<button>Sign Up</button>
</div>
</form>
</body>
</html>
마음에 드는 사이트에 들어갔는데,
화면 배치가 너무 마음에 든다면,
F12를 눌러서 Form에서 어떻게 배치를 하는지도 확인할 수 있다.
반응형
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [HTML] 엔티티, Entity란? (0) | 2019.12.23 |
|---|---|
| [HTML] Time 태그 사용법 알아보기 (7) | 2019.12.20 |
| [HTML] Form 이란? 폼 사용하기 (2) | 2019.12.16 |
| [HTML] lang attribute 활용하기 - 언어 선택 옵션 (2) | 2019.11.26 |
| [HTML] lang attribute 란? (2) | 2019.11.25 |
댓글