- form
1-1) form#1
form은 회원가입, 로그인 게시글 등록 등을 위해 사용한다.
<form method="get" action="페이지명.jsp" name="form" target="_blank">
<fieldset>
<legend>회원가입</legend>
<p>
<input type="text">
text
</p>
<p>
<input type="password">
password
</p>
<p>
<input type="checkbox">
checkbox
</p>
<p>
<input type="tel">
tel
</p>
<p>
<input type="file">
file
</p>
<p>
<input type="color">
color
</p>
<p>
<input type="text">
</p>
<p>
<input type="date">
date
</p>
<p>
<input type="month">
month
</p>
<p>
<input type="number">
number
</p>
<p>
<input type="submit">
submit
</p>
</fieldset>
</form>
input type에 입력받고자 하는 형식을 적절하게 찾아 사용하면 된다.
날짜를 사용하면 날짜 형식과 달력이 추가로 나오게 된다.
pssword는 기본적으로 작성 내용이 ***처리되어 표시된다.
1-2) form#2 예제1
<p>
<label for="userid">아이디</label>
<input type="text" id="userid" title="아이디 입력" size="10" maxlength="5" placeholder="아이디" required autocomplete="off" class="w50">
<!--
size : 입력 박스 크기
maxlength : 최대 입력 수
placeholder : 안내글
required : 필수 사항
autocomplete : 자동완성
-->
</p>
size : 입력 박스 크기 설정
maxlength : 최대 입력 글자 수
title : 접근성용
placeholder : 입력 박스에 나타나 있는 안내글 (위의 경우 아이디, 비밀번호 입력에 해당)
required : 필수 사항 (입력하지 않으면 submit이 되지 않으며 오류창이 발생한다)
autocomplete : 자동완성 (이전에 작성한 내용들이 자동으로 나타난다)
.w150 {
width: 150px;
}
.w80 {
width: 80px;
}
.w50 {
width: 50px;
}
입력 박스의 크기를 직접 주지 못하니 css에서 크기를 정한 class를 적용시킨다.
<p>
<label for="tel">전화번호</label>
<input type="tel" id="tel" title="국번 세자리" class="w50"> -
<input type="tel" title="중간 네자리" class="w80"> -
<input type="tel" title="끝 네자리" class="w80">
<!-- id는 한 번만 -->
</p>
전화번호, 이메일 같이 나누어서 입력을 받을 땐 id는 한 번만 작성한다.
<p>
<input type="checkbox" id="chk1" name="chk1" >
<label for="chk1">화장품</label>
<input type="checkbox" id="chk2" name="chk2">
<label for="chk2">운동화</label>
<input type="checkbox" id="chk3" name="chk3">
<label for="chk3">상품권</label>
<!-- checkbox는 name 필수, 중복선택 가능한 checkbox는 name을 각각 다르게 -->
</p>
<p>
<input type="radio" id="rad1" name="rad">
<label for="rad1">1학년</label>
<input type="radio" id="rad2" name="rad">
<label for="rad2">2학년</label>
<input type="radio" id="rad3" name="rad">
<label for="rad3">3학년</label>
<!-- 중복선택 안되는 radio는 name을 같게 -->
</p>
checkbox의 경우 여러 항목들을 중복으로 선택이 가능하므로 각각 다른 name을 부여해 주고, radio의 경우 label들 중 하나만 선택이 가능하기에 name을 같게 부여해 준다.
1-3) form#3 예제2
<style>
.box {
margin: 50px;
}
.w410 {
width: 410px;
}
.w120 {
width: 120px;
}
.w610 {
width: 610px;
}
.join {
width: 800px;
margin: 50px auto;
}
.join table {}
.join table .w1 {
width: 160px;
background: lightcyan;
}
.join table .w2 {}
.join table td {
border: 1px solid #000;
}
.join table td {
border: 1px solid #000;
padding: 10px 15px;
vertical-align: top;
}
.join table td input[type=text] {
height: 25px;
border: 1px solid #000;
box-sizing: border-box;
}
.join table td select {
height: 25px;
border: 1px solid #000;
}
.join p {
text-align: center;
margin-top: 40px;
}
.join p input {
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid #000;
}
.join p input:last-child {
background: lightcoral;
}
</style>
</head>
<body>
<div class="box">
<div class="join">
<form action="" method="get">
<table>
<colgroup>
<col class="w1">
<col class="w2">
</colgroup>
<tbody>
<tr>
<td>
<label for="catName">고양이 이름</label>
</td>
<td>
<input type="text" id="catName" title="고양이 이름 입력" class="w410" required placeholder="야옹이">
</td>
</tr>
<tr>
<td><label for="addr">주소</label></td>
<td>
<select id="addr" title="주소 선택">
<option>서울</option>
<option>인천</option>
<option>경기</option>
<option>강원</option>
<option>충청</option>
<option>전라</option>
<option>경상</option>
<option>제주</option>
<!-- option은 css처리 안한다 -->
</select>
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="rad" id="rad1">
<label for="rad1">수컷</label>
<input type="radio" name="rad" id="rad2">
<label for="rad2">암컷</label>
</td>
</tr>
<tr>
<td>좋아하는 것</td>
<td>
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">고등어</label>
<input type="checkbox" name="chk2" id="chk2">
<label for="chk2">돼지고기</label>
<input type="checkbox" name="chk3" id="chk3">
<label for="chk3">참치</label>
<input type="checkbox" name="chk4" id="chk4">
<label for="chk4">츄르</label>
<input type="checkbox" name="chk5" id="chk5">
<label for="chk5">소고기</label>
</td>
</tr>
<tr>
<td>사진</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td><label for="username" title="집사 이름 입력">집사 이름</label></td>
<td>
<input type="text" id="username" class="w410">
</td>
</tr>
<tr>
<td><label for="email" title="Email 주소 입력">Email 주소</label></td>
<td>
<input type="email" id="email" class="w410">
</td>
</tr>
<tr>
<td><label for="coment">코멘트</label></td>
<td>
<textarea id="coment" cols="50" rows="6" class="w610"></textarea>
</td>
</tr>
</tbody>
</table>
<p>
<input type="submit" value="확인">
<input type="reset" value="초기화">
</p>
</form>
</div>
</div>
</body>
어제와 오늘 배운 table을 사용해 편하게 만들어 보았다.
reset을 사용해 누르게 되면 입력했던 모든 내용들이 초기화된다.
1-4) form#4 예제3
<main id="container" class="join">
<section id="content">
<div class="inner">
<h2>회원 정보 입력</h2>
<p><b>*</b>필수 입력 항목</p>
<form action="#" method="post" name="form" target="_blank">
<fieldset>
<legend>회원 정보 입력</legend>
<table>
<colgroup>
<col class="w1">
<col class="w2">
</colgroup>
<tbody>
<tr>
<td><label for="userName">이름</label><b>*</b></td>
<td>
<input type="text" id="userName" class="w180" required placeholder="ex)홍길동">
</td>
</tr>
<tr>
<td><label for="userDate">생년월일</label><b>*</b></td>
<td>
<input type="text" id="userDate" class="w180" required placeholder="2020.05.05">
</td>
</tr>
<tr>
<td><label for="userSex">성별</label><b>*</b></td>
<td>
<input type="text" id="userSwx" class="w180" required placeholder="남자/여자">
</td>
</tr>
<tr>
<td><label for="userId">아이디</label><b>*</b></td>
<td>
<input type="text" id="userId" class="w180" required placeholder="아이디">
<button>중복확인</button>
<span>6자 이상(한글/특수문자 불가)</span>
</td>
</tr>
<tr>
<td><label for="userPwd">비밀번호</label><b>*</b></td>
<td>
<input type="password" id="userPwd" class="w180" required placeholder="비밀번호6자리">
<span>영문, 숫자, 특수문자를 혼합하여 8~15자로 사용 합니다. 공백은 사용이 불가능합니다.</span>
</td>
</tr>
<tr>
<td><label for="userPwd1">비밀번호 확인</label><b>*</b></td>
<td>
<input type="password" id="userPwd1" class="w180" required placeholder="비밀번호6자리">
</td>
</tr>
<tr>
<td><label for="userEmail">이메일</label><b>*</b></td>
<td>
<input type="text" id="userEmail" class="w180">
@
<input type="text" id="userEmail" class="w180">
<select id="userEmail">
<option>기타(직접입력)</option>
<option>naver.com</option>
<option>hanmail.ner</option>
<option>daum.net</option>
<option>gmail.com</option>
</select>
<button>증복확인</button>
</td>
</tr>
<tr>
<td><label for="userTel">휴대폰 번호</label><b>*</b></td>
<td>
<input type="text" id="userTel" class="w180">
</td>
</tr>
<tr>
<td><label for="userAdd">배송주소 (선택)</label></td>
<td>
<input type="text" id="userAdd" class="w100">
<button>우편번호찾기</button>
<p class="txt">
<input type="text" id="usserAdd" class="w670">
</p>
</td>
</tr>
<tr>
<td>멤버십 정보<br> 수신 동의</td>
<td>
회원님께 제공되는 공지, 이벤트 소식, 포인트 정보, 행사, 신상품 소개 등의 다양한 정보 안내를 받으시겠습니까?
<p class="txt2">
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">이메일 수신동의</label>
<input type="checkbox" name="chk2" id="chk2">
<label for="chk2">SMS 수신 동의</label>
</p>
</td>
</tr>
<tr>
<td>사이트<br>정보 수신 동의</td>
<td>
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">이메일을 통한 상품 및 이벤트 정보 수신에 동의합니다.</label>
</td>
</tr>
<tr>
<td>관심브랜드</td>
<td>
선택하신 브랜드의 상품 및 다양한 이벤트 정보를 받으실 수 있습니다.
</td>
</tr>
</tbody>
</table>
</fieldset>
<em>
<input type="submit" value="확인">
<input type="reset" value="초기화">
</em>
</form>
</div>
</section>
</main>.join .inner {
padding: 100px 0;
position: relative;
width: 990px;
margin: auto;
box-sizing: border-box;
}
.join h2 {
font-size: 25px;
font-weight: 600;
padding-bottom: 20px;
margin-bottom: 10px;
border-bottom: 3px solid #000;
}
.join h2 + p {
position: absolute;
top: 110px;
right: 0;
}
.join b {
color: red;
margin: 0 10px;
vertical-align: middle;
}
.join table {}
.join table .w1 {
width: 200px;
}
.join table .w2 {
width: auto;
}
.join table .w180 {
width: 180px;
}
.join table .w100 {
width: 100px;
}
.join table .w670 {
width: 670px;
}
.join table tr {}
.join table tr td {
padding-bottom: 10px;
vertical-align: middle;
}
.join table tr td .txt {
margin-top: 5px;
}
.join table tr td .txt2 {
margin-top: 5px;
}
.join table tr td .txt2 label {
margin-right: 100px;
}
.join table tr:nth-child(1) td {
padding-top: 10px;
}
.join table tr:nth-child(3) td,
.join table tr:nth-child(9) td,
.join table tr:nth-child(10) td,
.join table tr:nth-child(11) td,
.join table tr:nth-child(12) td {
border-bottom: 1px solid gray;
padding-bottom: 10px;
}
.join table tr:nth-child(4) td,
.join table tr:nth-child(10) td,
.join table tr:nth-child(11) td,
.join table tr:nth-child(12) td,
.join table tr:nth-child(13) td {
padding-top: 10px;
}
.join table button {
height: 30px;
padding: 0 10px;
}
.join table select {
width: 200px;
height: 30px;
}
.join table tr td input[type=text], .join table tr td input[type=password] {
box-sizing: border-box;
height: 30px;
border: 1px solid gray;
background: lightgray;
padding: 0 5px;
}
.join em {
display: block;
text-align: center;
margin-top: 40px;
}
.join em input {
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid #000;
}
.join em input:last-child {
background: gray;
color: white;
}
필수입력항목들엔 html에서 required를 추가하고, css에선 빨간색 *을 <b>로 묶어 처리했다.