요건
- 이름 (최소, 2글자 이상)
- 비밀 번호, 재확인 (최소 6글자 이상, 문자, 숫자, 특수문자 모두 포함)
- 메일주소 (@,. 포함 / @,. 앞뒤로 무조건 문자값 있어야됨)
- 성별 (남성, 여성 중 하나만 선택)
- 좋아하는 색상 (복수개 선택 가능)
- 학력 (복수개중 하나만 선택: 드롭다운 메뉴 형식)
- 건의내용 (장문의 텍스트 형식)
form
- 안쪽 input요소들의 정보값을 서버에 전달하기 위한 틀
- method: 폼 정보 값을 서버에 전달하는 방식(GET, POST)
- GET: name에 value값에 url을 통해서 전달하는 방식
- POST: url에 출력되지 않고 보안상 중요한 정보값을 숨겨서 보내는 방식
- fieldset: 개발 로직상 필요한 태그가 아닌 웹접근성 측면의 태그
- input요소는 무조건 label과 for, id값을 활용해서 연동 (접근성 측면)
- input요소는 name과 value값이 같이 있어야 됨
join. html
<main class="join">
<h1>Be Our Group</h1>
<article>
<form method="get" action="index.html">
<fieldset>
<h2>
<label for="username">성명</label>
</h2>
<p>
<input type="text" name="username" id="username" />
<span class="errName">이름을 최소 2글자 이상 입력하세요.</span>
</p>
<h2>
<label for="pw1">비밀번호</label>
</h2>
<p>
<input type="password" name="pw1" id="pw1" />
<span class="errPwd1"
>비밀번호는 특수문자, 문자, 숫자 모두 포함해야 합니다.</span
>
</p>
<h2>
<label for="pw2">비밀번호 확인</label>
</h2>
<p>
<input type="password" name="pw2" id="pw2" />
<span class="errPwd2">비밀번호가 서로 다릅니다.</span>
</p>
<h2>
<label for="email">메일 주소</label>
</h2>
<p>
<input type="text" name="email" id="email" />
<span class="erremail">이메일 주소를 올바르게 입력하세요.</span>
</p>
<h2>성별</h2>
<p>
<label for="male">남성</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female">여성</label>
<input type="radio" id="female" name="gender" value="'female" />
<span class="errgender">성별을 입력하세요.</span>
</p>
<h2>좋아하는 색상</h2>
<p>
<label for="red">red</label>
<input type="checkbox" id="red" name="myColor" value="red" />
<label for="green">green</label>
<input
type="checkbox"
id="green"
name="myColor"
value="green"
/>
<label for="blue">blue</label>
<input type="checkbox" id="blue" name="myColor" value="blue" />
<span class="errmyColor"
>좋아하는 색상을 하나 이상 선택하세요.</span
>
</p>
<h2><label for="edu">최종 학력</label></h2>
<p>
<select name="edu" id="edu">
<option value="">최종 학력 선택하세요</option>
<option value="elemantary-school">초등학교 졸업</option>
<option value="middle-school">중학교 졸업</option>
<option value="high-school">고등학교 졸업</option>
<option value="college">대학교 졸업</option>
</select>
<span class="erredu">최종 학력을 입력하세요.</span>
</p>
<h2><label for="comments">남기는 말</label></h2>
<p>
<textarea name="comments" id="comments"></textarea>
<span class="errcomments">남기는 말을 입력하세요.</span>
</p>
<div>
<input type="reset" value="작성 취소" class="btn" />
<input type="submit" value="회원 가입" class="btn" />
</div>
</fieldset>
</form>
</article>
</main>
_join.scss
@use 'variable';
.join {
width: 100%;
display: flex;
justify-content: space-between;
h1 {
width: 30%;
text-align: right;
}
article {
width: 65%;
text-align: left;
margin-bottom: 50px;
h2 {
font-size: 1.2rem;
}
p {
margin-bottom: 20px;
input[type='text'],
input[type='password'],
select {
width: 60% !important;
}
span {
font-size: 0.7rem;
color: hotpink;
display: none;
}
}
textarea {
width: 60% !important;
}
}
}
// tablet
@media screen and (max-width: variable.$wid_tablet) {
.join {
flex-wrap: wrap;
h1 {
width: 100%;
text-align: left;
margin-bottom: 50px;
}
article {
width: 100%;
}
}
}
Tags:
웹개발_교육
