HTML /회원가입 화면 만들기/ h2 , label , input , button 사용하기 / input type 속성 / label의 필요성

HTML 공부를 하면서 아래와 같은 회원가입 화면을 만드는 평가가 있었다.
제목은 h2 태그를 사용했고, input 태그와 label 태그, button 등을 사용했습니다.
CSS까지 포함한 글은 다음번에 써보도록 하겠다..

---

회원가입 테스트 화면

테스트 예시 이미지

 

---

 

1. 회원가입 제목 만들기

제목의 Create an account는 다른 폰트보다 크고 두꺼운 것을 확인할 수 있습니다.
이유는 h2 태그를 사용했기 때문입니다. h1부터 h6까지 있으며, h1에 가까울수록 더 크고 두꺼운 폰트가 표현됩니다.
태그를 사용하지 않고 CSS를 사용하는 방법도 있습니다.

<h2>Create an account</h2>

---

2. 입력창 만들기 (input type 속성)

회원가입을 하는 HTML 창에서 데이터를 입력하는 박스를 input 태그를 사용해서 만들었습니다.
input 태그의 type 속성을 사용해서 이름과 이메일 비밀번호를 입력받았습니다.
type 속성의 속성값은 많아서 아래에 링크를 참고해주세요.

placeholder 속성은 번역으로는 "자리 표시자"이며, 해당 input 태그를 설명하는 역할을 하는데 사용합니다.
placeholder 속성은 input의 입력창에 클릭하면 placeholder의 값은 사라지게 됩니다.

input 태그에 name 속성은 필수입니다 name 속성값을 사용해서 form이 submit 되거나, 데이터가 이동할 때 데이터를 보내고 찾는데 키와 같은 역할을 한다.

<p>Full Name</p>
<input type="text" name="name" placeholder="ex.John Doe"> 
<p>Email Address</p>
<input type="email" name="mail" placeholder="ex.Johndoe@gmail.com">
<p>Password</p>
<input type="password" name="password" placeholder="Min.5 characters" minlength="5">

[html] input type 속성

---

4. 버튼 만들기

버튼을 만들 때에는 button 태그와 input 태그를 사용할 수 있습니다.
두 태그의 차이점은 스스로 닫히는 차이점이 있고, 버튼에 쓰이는 문구를 사용하는 방법이 다르다는 점이 있습니다.
개인적으로 input 태그 아래 input의 버튼이 있으면 헷갈려서 버튼은 button을 잘 사용하게 되는 거 같습니다.

<button type="button" onclick="loginFn()">Create your account</button>

<input type="button" onclick="loginFn()" value="Create your account">

---

lable태그를 사용하는 것을 ..빼 먹어서 수정했다.

5. lable 태그 사용

<lable>태그는 필수적이다.

사용방법은 input을 안내하는 문자에 label태그를 붙이면 되고,
label태그 안에서 for="input의 id값"을 정의해주면 된다.
label이 적용된 문자를 클릭하게 되면, for에 지정해놨던 id값을 가진 input으로 focus하게 된다.

Full name을 클릭하게 되면,
그 아래의 input 태그의 입력창으로 focus하게 된다.

<p><label for="nameid">Full Name</label></p>
<input type="text" id="nameid"name="name" placeholder="ex.John Doe">

---

반응형

회원가입창 전체 코드

<section>
	<div>
		<h2>Create an account</h2>
		
		<form method="#" action="#" name="frm">
			<p><label for="nameid">Full Name</label></p>
			<input type="text" id="nameid"name="name" placeholder="ex.John Doe"> 
			<p><label for="mailid">Email Address</label></p>
			<input type="email" id="mailid" name="mail" placeholder="ex.Johndoe@gmail.com">
			<p><label for="pwid">Password</label></p>
			<input type="password" id="pwid" name="password" placeholder="Min.5 characters" minlength="5">
			<p>By clicking "Create your acount" below, you agree to our terms of service and privacy policy.</p>
			<button type="button" onclick="loginFn()">Create your account</button>
		</form>
		
	</div>
</section>