지피티활용능력1급
2023.07.20 모각코 3회차 결과 본문
<form>태그를 이용해 만드는 간단한 회원가입 양식
html만을 이용해서 만들기 때문에 실제 작동은 안됨
우선 제목을 작성해주었다.
<div>보단 알아보기 쉬운 <header>태그를 사용
이제 <label>과 <input>태그를 사용해 본격적으로 코딩을 해보자.
이때 <form>태그 안에 모든 코드를 작성해야 정상적으로 작동한다.
이름을 입력받기 위한 작성한 태그와 속성들
필수로 작성되어야하기 때문에 required를 입력하였고 placeholder는 각각 "First Name"과 "Last Name"으로 작성해주었다.
그리고 마지막엔 줄바꿈을 위한 <br />태그 사용
이메일을 입력받기 위해 type속성에는 email을 작성해주었다. 이메일에 올바른 형식의 입력이 주어지지 않는다면 경고문구 출력
username은 위의 이름을 입력받는 방식과 동일하다.
비밀번호를 입력받는 부분이다.
타입은 password로 하여 비밀번호를 입력받도록 하였고 최소 길이를 10으로 설정해 10보다 작은 길이의 비밀번호가 주어질 시 경고문구가 출력되도록 하였다.
날짜를 입력받는 부분이다. 타입을 'date'로 설정해주면 된다.
다음은 값이 가려진 숫자를 컨트롤하는 위젯을 나타내주는 'range' 타입이다.
<input> 요소의 타입이 'range'인 경우, 사용자가 특정 값 이상이며 다른 특정 값 이하인 숫자 값을 지정할 수 있다. 하지만 정확한 값을 중요시하지 않는다. 일반적으로 이는 숫자 입력란이 아닌 슬라이더 또는 다이얼 컨트롤을 사용하여 표현된다.
'min'은 최소값 'max'는 최대값이며 'step'은 1칸의 설정값이다. value를 5에 맞춰주면 처음에 슬라이더가 가운데 위치해 있는다.
이때 이 슬라이더에 눈금을 추가해주고 싶으면 list="markers"를 사용해주면 된다.
아래 <datalist>태그에 list와 같은 이름의 id인 markers를 추가해주고 위와 같이 <option>태그를 채워주면 된다.
마지막으로 색깔을 입력받는 위젯이다. color타입을 작성해주면 된다.
"Creat Account"의 제출버튼까지 만들어 주면 끝.
전부 의도한대로 만들어진 모습을 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
</head>
<body>
<form>
<header>
<h1>Create An Account</h1>
</header>
<main>
<label for="firstname">Fisrt name</label>
<input id="firstname" required placeholder="Fisrt Name" type="text" /><br />
<label for="lastname">Last name</label>
<input id="lastname" required placeholder="Last Name" type="text" /><br />
<label for="email">Email</label>
<input id="email" required placeholder="Email" type="email" /><br />
<label for="username">User name</label>
<input id="username" required placeholder="User Name" type="text" /><br />
<label for="password">Password</label>
<input id="password" required placeholder="Password" minlength="10" type="password" /><br />
<label for="birthday">Birth date</label>
<input id="birthday" required type="date" /><br />
<label for="happy">How happy are you?</label>
<input id="happy" required type="range" min="1" max="10" value="5" step="1" list="markers" /><br />
<datalist id="markers">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9"></option>
<option value="10"></option>
</datalist>
<label for="color">What is your fav.color?</label>
<input id="color" required type="color" /><br />
<input type="submit" value="Creat Account" />
</main>
</form>
</body>
</html>전체 코드
+ 추가로 input 속성에 autofocus를 추가해주면 자동으로 해당하는 input에 하이라이트가 된다.
(커서가 깜빡이거나 검은색 테두리가 생기는 등)
'2023 하계 모각코' 카테고리의 다른 글
| 2023.07.25 모각코 4회차 결과 (0) | 2023.07.27 |
|---|---|
| 2023.07.25 모각코 4회차 목표 (0) | 2023.07.26 |
| 2023.07.20 모각표 3회차 목표 (0) | 2023.07.22 |
| 2023.07.18 모각코 2회차 결과 (0) | 2023.07.19 |
| 2023.07.18 모각코 2회차 목표 (0) | 2023.07.18 |
