※기본 양식
-step0 : table
-step1 : input-text type
-step2 : input-radio , select, input-data
-step3 : input-checkbox, input-color
-step4 : textarea
-step5 : input-submit/reset
※textarea : 텍스트 값을 받을 수 있도록 영역을 지정/설정하는 태그
<textarea cols="길이" rows="길이"></textarea>
※실습 주의 사항
테이블의 각 행은 기본적으로 두 칸임을 기억할 것(필요에 의해 병합이 요구됨)
※실습 스크립트
<!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>
<form action="#" method="get">
<!-- step 0 표 -->
<table width = "400px">
<!-- step 1 -->
<tr>
<th bgcolor = "gray" colspan="2" height = "50px" align="left">
step1 : 아이디/비번 입력
</th>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">아이디</td>
<td> <input type="text"></td>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">비밀번호</td>
<td> <input type="password"></td>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">비밀번호 확인</td>
<td> <input type="password"></td>
</tr>
<!-- step2 -->
<tr>
<th bgcolor = "gray" colspan="2" height = "50px" align="left">step2 : 개인정보</th>
</tr>
<tr bgcolor = "whitesmoke" height = "35px" >
<td align="right">성별 : </td>
<td>남<input type="radio" name = "gender" value="man">
여<input type="radio" name = "gender" value="woman">
</td>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">혈액형 :</td>
<td><select name="bloodType" id="">
<option value="A">A형</option>
<option value="B">B형</option>
<option value="AB">AB형</option>
<option value="O">O형</option>
</select> </td>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">생일 :</td>
<td><input type="date"></td>
</tr>
<!-- step3-->
<tr>
<th bgcolor = "gray" colspan="2" height = "50px" align="left">step3 : 선호도</th>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">취미 :</td>
<td>
축구 <input type="checkBox" name="hobby" value = "soccer">
야구 <input type="checkBox" name="hobby" value = "baseball">
농구 <input type="checkBox" name="hobby" value = "basketball">
</td>
</tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td align="right">좋아하는 색깔 :</td>
<td><input type="color" name = "colorValue"></td>
</tr>
<!-- step4 -->
<tr><th bgcolor = "gray" colspan="2" height = "50px" align="left">step4 : 적고 싶은 말</th></tr>
<tr bgcolor = "whitesmoke" height = "35px">
<td colspan="2"><textarea cols="56" rows="5"></textarea></td>
</tr>
<!-- step5 --> <tr >
<td colspan="2" bgcolor = "whitesmoke" align="center">
<input type="submit" value="제출하기">
<input type="reset" value="다시쓰기">
</td>
</tr>
</table>
</form>
</body>
</html>
※실행 결과
-visual stdio code 에서는 정상 수행되나, blogger 에서는 radio 의 기능이 불가함
댓글
댓글 쓰기