습관제작소
22-06-10 Smart HTML/CSS 본문
HTML
- select 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select>
<option>선택하세요</option>
<option value = "naver">naver.com</option>
<option value = "duum">daum.net</option>
</select>
<!-- 글자를 적을 수 있는 공간 만들기 -->
<textarea cols = '50' rows="3">
</textarea>
</body>
</html>
- 회원가입 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="400px">
<!-- 1.아이디/비번 -->
<tr bgcolor="gray" height="50px">
<!-- 설명이 들어가는 칸 (제목) -->
<th colspan="2">Step 1 : 아이디/비번 입력</th>
<!-- colspan 가로 합치기, rowspan 세로 합치기 -->
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 아이디 입력 칸 -->
<td>아이디 : </td>
<td><input type="text"></td>
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 비밀번호 입력 칸 -->
<td>비밀번호 : </td>
<td><input type="password"></td>
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 비밀번호를 확인하는 칸 -->
<td>비밀번호 확인 : </td>
<td><input type="password"></td>
</tr>
<!--2.개인정보 -->
<tr bgcolor="gray" height="50px">
<!-- 제목-->
<th colspan="2">Step 2 : 개인정보</th>
<!-- colspan 가로 합치기, rowspan 세로 합치기 -->
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 성별 -->
<td>성별 : </td>
<td>
<span>남</span><input type="radio" name="gender">
<span>여</span><input type="radio" name="gender">
</td>
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 혈액형 -->
<td>혈액형 : </td>
<td>
<select>
<option value="A형">A형</option>
<option value="B형">B형</option>
<option value="O형">O형</option>
<option value="AB형">AB형</option>
</select>
</td>
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 생일 -->
<td>생일 : </td>
<td><input type="date"></td>
</tr>
<!-- 3.선호도 -->
<tr bgcolor="gray" height="50px">
<!-- (제목) -->
<th colspan="2">Step 3 : 선호도</th>
<!-- colspan 가로 합치기, rowspan 세로 합치기 -->
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!-- 취미 -->
<td>취미 : </td>
<td>
<span>축구</span><input type="checkbox" name="hobby">
<span>야구</span><input type="checkbox" name="hobby">
<span>농구</span><input type="checkbox" name="hobby">
</td>
</tr>
<tr bgcolor="whitesmoke" height="35px">
<!--색깔 -->
<td>좋아하는 색깔 : </td>
<td><input type="color"></td>
</tr>
<!--4.적고싶은말 -->
<tr bgcolor="gray" height="50px">
<!-- (제목) -->
<th colspan="2">Step 4 :적고 싶은 말</th>
<!-- colspan 가로 합치기, rowspan 세로 합치기 -->
</tr>
<tr bgcolor="whitesmoke" height="35px">
<td colspan="2">
<textarea cols='60' rows="3">
</textarea>
</td>
</tr>
<td bgcolor="whitesmoke" colspan="2" align="center"><input type="submit"> <input type="reset"></td>
</table>
</body>
</html>
'SMHRD or ITSchool > HTML and CSS' 카테고리의 다른 글
22-06-15 Smart HTML/CSS (0) | 2022.06.15 |
---|---|
22-06-14 Smart HTML/CSS (0) | 2022.06.14 |
22-06-16 Smart HTML/CSS (0) | 2022.06.11 |
22-06-09 Smart HTML/CSS (0) | 2022.06.09 |
22-06-08 Smart HTML/CSS (0) | 2022.06.08 |
Comments