티스토리 뷰
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="add.css">
</head>
<body>
<form action="#" method="post" name="login">
<fieldset>
<legend>회원가입</legend>
<div>
<label for="n">이름</label>
<input type="text" name="name" id="n" required>
</div>
<div>
<label for="no">주민등록번호</label>
<input type="text" name="no" id="no1" required minlength="6" maxlength="6" size="10">-
<input type="password" name="no" id="no2" required minlength="7" maxlength="7" size="10">
</div>
<div>
<label for="id">ID</label>
<input type="text" name="id" id="id" required>
</div>
<div>
<label for="pw">PW</label>
<input type="password" name="pw" id="pw" required maxlength="15" minlength="10" placeholder="10자리 이상 15자리 이하">
</div>
<div>
<label for="b">생년월일</label>
<input type="date" name="birth" id="b" max="2023-11-29" min="1996-12-30">
</div>
<div>
<label>성별</label>
<input type="radio" name="r" id="girl">여자
<input type="radio" name="r" id="boy">남자
</div>
<div>
<label for="pw">이메일</label>
<input type="email" name="email" id="e" placeholder="abc@gmail.com">
</div>
<div>
<label>전화번호</label>
<input type="tel" name="" id="" pattern="\d{3}-\d{4}-\d{4}" placeholder="예) 010-1234-1234">
</div>
<div>
<p>현재 관심사는 무엇인가요?</p>
<input type="checkbox" name="" id="" value="영화">영화<br>
<input type="checkbox" name="" id="" value="드라마">드라마<br>
<input type="checkbox" name="" id="" value="운동">운동<br>
</div>
<div class="finish">
<input class="submit" type="submit" value="완료" onclick="alert('제출하시겠습니까?')">
<input type="reset" value="다시작성">
</div>
</fieldset>
</form>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
form {
width: 80%;
margin: 0 auto;
}
fieldset {
min-width: 0;
width: 50%;
/* border: 1px solid red; */
margin: 0 auto;
padding: 20px;
}
legend{
font-size: 25px;
font-weight: 600;
padding: 10px;
}
div{
padding: 10px;
}
.finish{
display: flex;
align-items: center;
justify-content: center;
}
input[type="submit"] {
background-color: transparent;
padding: 5px 10px;
border-radius: 5px;
margin: 0 20px;
}
input[type="reset"]{
background-color: transparent;
padding: 5px 10px;
border-radius: 5px;
margin: 0 20px;
}
form태그를 사용하여 회원가입 폼을 만들어보았다.
fieldset을 사용하여 폼 요소 안에서 하나의 그룹으로 묶어주었고 input속성들을 사용하여 박스를 만들어주었다.
text는 글자를 입력하는 상자로 maxlength ,minlength 를 통해 글자 수 제한을 할 수 있다.
password는 비밀번호 입력 상자로 입력된 내용은 **과 같이 보이지 않도록 표현된다.
그렇기 때문에 주민등록 번호를 입력시에 앞번호는 text 상자를 활용하고 뒷 번호는 password를 활용하여 보이지 않도록 했다.
size는 보여지는 길이를 말한다. (max와 다름 주의)
생년월일은 date를 이용하여 날짜를 지정할 수 있도록하였다.
이때 max와 min을 통해 달력에 표기되는 숫자의 최대와 최소를 지정할 수 있다.
성별은 radio를 이용했다.
여자 거나 남자거나 둘 중 하나만 선택할 수 있도록 해야하기 때문에 특성상 radio를 사용했다.
전화번호 입력은 tel을 이용했다. (text로 해도 무방)
전화번호의 입력양식을 미리 지정해놓았는데
이때 입력양식은 pattern="\d{3}-\d{4}-\d{4}"으로 지정해 주었다.
이것의 의미는 \d 정수 {3} 3자리 - 입력 문자라는 뜻이다.
이메일은 email을 이용했다.
email을 이용하면 @가 없으면 @문자가 없다고 알림이 간다.
관심사 체크는 여러개를 할 수있도록 만들고자 했다.
이러한 목적으로 여러개 선택할 수 있는 checkbox를 사용했다.
마지막으로 완료 버튼과 다시작성 버튼은
submit과 reset을 사용했는데
submit을 클릭하면 전송하고 reset은 클릭하면 초기화되어 다시 작성해야한다.
위에 사용한 입력 속성의 종류를 살펴보자
- placeholder
입력 해야할 문자들에 대한 힌트이다.
즉, 가이드 문자를 말한다. (미리 입력되어 있는것처럼 보이지만 입력시 사라진다.)
- required
필수 입력해야하는 것을 말한다.
만약 입력이 없이 submit을 하려고 하면 입력하라는 알람이 뜬다.
- pattern
위에서 설명했듯이 입력 양식을 지정하는 것이다.
\d{3}은 정수 3자리를 뜻한다.
- maxlength
입력문자 길이의 최대길이를 지정해준다.
- minlength
입력문자 길이의 최소길이를 지정해준다.
- max
최대값을 말한다.
- min
최소값을 말한다.
-multiple
여러개를 지정할 수 있도록 해주는 속성이다.
- readonly
입력된 내용이 수정되지 못하도록 한다.
또 알면 좋은 태그
- textarea
텍스트를 여러줄 입력할 수 있는 상자이다.
rows, cols 로 줄과 칸을 설정할 수 있다.
submit에 추가적으로 onclick을 사용하면 제출 버튼 클릭시 제출할거냐는 팝업창이 뜬다.
<input class="submit" type="submit" value="완료" onclick="alert('제출하시겠습니까?')">
또한 select를 사용하여 여러개 중에 선택할 수 있는 선택 목록 상자를 사용할 수 있다.
option을 사용하여 다양한 선택 목록을 만들 수 있다.
<h3>관심 있는 주제를 고르세요</h3>
<select name="" id="">
<option value="1">IT</option>
<option value="2">예술</option>
<option value="3">스포츠</option>
<option value="4">경제</option>
</select>'코딩 > HTML&CSS' 카테고리의 다른 글
| [9주 2일차] CSS 정리 (1) | 2023.12.05 |
|---|---|
| 클론코딩 2 (1) | 2023.12.01 |
| 이미지 정렬 맞추기 & hover & opacity (1) | 2023.11.28 |
| 슬라이드 연습 (1) | 2023.11.24 |
| [7주 2일차] HTML CSS (1) | 2023.11.21 |
- Total
- Today
- Yesterday