Coding/HTML
[html 폼 만들기] style 시트 살짝 첨가/input태그
by 찡콩찡
2022. 3. 14.
과제1> 아래의 그림과 같이 웹페이지를 생성하라
코드 :
<!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>
<style>
ul {
list-style-type: none;
}
li {
margin:20px;
}
li label {
width:80px;
float:left;
}
fieldset{
margin:15px;
width:400px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>개인정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="mail">메일주소</label>
<input type="text" id="mail">
</li>
</ul>
</fieldset>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="id">아이디</label>
<input type="text" id="id">
</li>
<li>
<label for="pwd">비밀번호</label>
<input type="text" id="pwd">
</li>
</fieldset>
</form>
</body>
</html>
과제2> 아래의 그림과 같이 웹페이지를 만들어라
<!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>
<style>
fiedlset {
width:400px;
}
ul {
list-style: none;}
li{
margin:10px;
}
li label {
width: 120px;
float:left;
text-align: right;
padding-right: 8px;
}
input[type="submit"]{
width:430px;
height:30px;
margin-top:15px
}
</style>
</head>
<body>
<h1> 회원가입 </h1>
<form>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="user-id">아이디</label>
<input type="text" id="user-id">
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1">
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input type="password" id="pwd2">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="mail">메일주소</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
<li>
<label for="homep">블로그/홈페이지</label>
<input type="url" id="homep">
</li>
</ul>
</fieldset>
<input type="submit" value="가입하기">
</form>
</body>
</html>
