본문 바로가기

HTML CSS

간단한 회원가입 포맷 작성 두번째 - HTML 기초 예제

  문제) 이미지와 같이 회원가입 포맷 작성 

* h1 태그 이용, form 태그 이용(서버 프로그램은 임의지정, post)

* 전화번호는 필수항목. 정규표현식 사용.(###-####-####) title, maxlength 속성사용.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입화면</title>
<style>
#a
{
	width: 300px;
	margin: auto;
}
#b
{
	width: 150px;
	margin: auto;
}
#c
{
	width: 110px;
	margin: auto;
}
table td
{
	text-align: right;
}
</style>
</head>
<body>
<form action="sample.html" method="post" name="form1">
<div id="a">
	<h1 style="text-align:center;">회원가입화면</h1>
	<table>
		<tr>
			<td>이름 : </td>
			<td><input type="text" name="name" size="20" /></td>
		</tr>
		<tr>
			<td>주소 : </td>
			<td><input type="text" name="address" size="20" /></td>
		</tr>
		<tr>
			<td>email : </td>
			<td><input type="text" name="mail" size="20" /></td>
		</tr>
		<tr>
			<td>&nbsp;전화번호 : </td>
			<td><input type="text" name="phonenumber" size="20" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" title="###-####-####" maxlength="13" required/></td>
		</tr>
	</table><br />
</div>
<div id="b">&nbsp;
	<input type="radio" name="gender" value="M" /> 남자&nbsp;
	<input type="radio" name="gender" value="M" /> 여자 <br /><br />
</div>
<div id="c">
	<input type="submit" value="Send" />&nbsp;
	<input type="reset" value="Reset" />
</div>
</form>
</body>
</html>

'HTML CSS' 카테고리의 다른 글

간단한 회원가입 포맷 작성 - HTML 기초 예제  (0) 2021.05.27