[Project H4C] 회원가입 폼 만들기
내 생애 첫 코딩이자
스터디그룹의 마지막 과제!
회원가입폼 만들기!!!
진짜 너무 힘들었다.....😭ㅋㅋㅋ
이번주 내내 잠 못자는 헬에 입성하여 지금도 살짝 제정신은 아니다....
우선 내가 모티브로 삼은 회원가입폼은
(무려) 네이버이다.
네이버 : 회원가입
nid.naver.com
하면서 후회했다...
아..........어렵다...........
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ하지만
중간에 컨셉 바꾸면
1주차 과제마감 시간은 아예 빠이빠이 할 것 같아서 강행했다...
정확히 말하면 (당연히)똑같이 못만들고 대충밖에 못만들었다..........
제길.........
ㅋㅋㅋㅋㅋㅋㅋㅠㅠ
서론은 여기까지하고
내가 작성한 코딩은 아래와 같다
(아래 설명글 추가)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body style="background-color:#F5F5F5">
<br>
<h1 style="background-color:F5F5F5; color:#32CD32; font-size:350%;">
Project H4C
</h1>
<br>
<h1 style="font-size:130%">
<b>아이디<br><input type="text" name="id" maxlength="15" style="font-size:130%" size=27.9 pattern="[a-zA-Z0-9]" required>
<br><br>비밀번호<br> <input type="password" name="password" maxlength="18" style="font-size:130%" size=27.9 required>
<br><br>비밀번호 재확인<br> <input type="password" name="password" maxlength="18" check style="font-size:130%" size=27.9 required>
<br><br><b>이름<br><input type="text" name="name" maxlength="10" style="font-size:130%" size=27.5 required>
<br><br><b>생년월일<br><input type="date" name="birthday" min="1920-01-01" max="2020-12-30" style="font-size:145%" required>
<br><br>
<b>성별<br><select name="gender" style="font-size:100%" required>
<option value="Gender"> 성별
<option value="Female"> 여자
<option value="Male"> 남자
</select>
<br><br>
<b>본인 확인 이메일<br><input type="email" name="email"
pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*"
style="font-size:130%" size=27.9>
<br>
<br>
<b>휴대전화<br><input type="tel" name="tel" style="font-size:130%" size=27.9 required>
<br>
<br>
<form action="enjoy">
<br><input type="image" src="
https://k.kakaocdn.net/dn/cOyEsW/btqFA6Gfqlq/ZTTLocnBwBk2qJS5moEDAK/img.png"
alt="Submit" width="376"; height= "53">
</form>
<br>
</body>
</html>
나름 설명을 달아보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body style="background-color:#F5F5F5">
👆백그라운드 색깔 설정.
네이버 회원가입 화면배경과 완전히 똑같은 색의 코드를 알 수 없어서 일단 최대한 비슷한 색으로 선정.
<br>
<h1 style="background-color:F5F5F5; color:#32CD32; font-size:350%;">
Project H4C
</h1>
<br>
<h1 style="font-size:130%">
<b>아이디<br><input type="text" name="id" maxlength="15" style="font-size:130%" size=27.9 pattern="[a-zA-Z0-9]" required>
👆아이디: 최대 길이는 15자, 알파벳과 숫자가 들어가도록 설정, 필수입력항목으로 설정.
<br><br>비밀번호<br> <input type="password" name="password" maxlength="18" style="font-size:130%" size=27.9 required>
👆비밀번호: 최대 길이는 18자, 필수입력항목으로 설정.
<br><br>비밀번호 재확인<br> <input type="password" name="password" maxlength="18" check style="font-size:130%" size=27.9 required>
👆비밀번호 재확인: 최대 길이는 18자, 비밀번호 항목을 똑같이 쓰는 check 항목 추가(이 부분은 사실 아직 잘 모르겠다..)
필수입력항목으로 설정.
<br><br><b>이름<br><input type="text" name="name" maxlength="10" style="font-size:130%" size=27.5 required>
<br><br><b>생년월일<br><input type="date" name="birthday" min="1920-01-01" max="2020-12-30" style="font-size:145%" required>
👆생년월일: input type="data"로 설정하고 1920년 1월 1일 부터 2020년 12월 30일까지 선택할 수 있게 설정.
생년월일도 역시 필수입력항목으로 설정.
<br><br>
<b>성별<br><select name="gender" style="font-size:100%" required>
<option value="Gender"> 성별
<option value="Female"> 여자
<option value="Male"> 남자
</select>
👆성별: select를 이용하여 성별을 남자,여자 중 택할 수 있게 설정. 필수입력항목으로 설정.
<br><br>
<b>본인 확인 이메일<br><input type="email" name="email"
pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*"
style="font-size:130%" size=27.9>
👆이메일: input type="email"로 설정. pattern 속성으로 이메일에 들어갈 수 있는 글자 제한.
(네이버는 회원가입 시 이메일이 필수항목이 아니길래 required 은 안넣었다)
<br>
<br>
<b>휴대전화<br><input type="tel" name="tel" style="font-size:130%" size=27.9 required>
👆휴대전화: input type="tel"로 설정. 필수입력항목으로 설정.
<br>
<br>
<form action="enjoy">
<br><input type="image" src="
https://k.kakaocdn.net/dn/cOyEsW/btqFA6Gfqlq/ZTTLocnBwBk2qJS5moEDAK/img.png"
alt="Submit" width="376"; height= "53">
</form>
👆이 부분은 구글링을 통해 첨가한 코딩인데
input type=submit 일 때 submit 버튼을 내가 넣고 싶은 이미지로 바꾸고 싶어서 이렇게 했는데..맞는지 모르겠다...
참고 페이지
https://html.com/input-type-image/
TYPE = IMAGE
Defines an image that is clicked to submit a form.
html.com
<br>
</body>
</html>
회원가입 시 필요한 중급이상의 스킬들은
(아이디,이메일 중복확인이나 required칸을 채워넣지 않으면 경고메세지가 뜬다거나 등등..)
코딩을 넣어는 봤으나 계속 오류가 나고 짜임새가 맞지 않아
아직까지 내 실력으로는 할 수 없는 영역같아서 우선은 접어두었다..... ㅠㅠ....
이것으로 1주차 과제를 마치겠다....시작은 미약하나 끝은....과연?
와 근데 너무 졸리다 ㅎㅎㅎㅎ 자야겠다 우선
굿나잇..!
'1. HTML' 카테고리의 다른 글
| html 이란? (정의) (1) | 2024.11.03 |
|---|---|
| 웹사이트는 text 파일일 뿐이다. (0) | 2024.11.03 |
| [Project H4C] 9. HTML5 멀티미디어 (0) | 2020.07.11 |
| [Project H4C] 8. HTML5 요소 (2) (0) | 2020.07.11 |
| [Project H4C] 8. HTML5 요소 (1) (0) | 2020.07.11 |