폼은 주로 로그인 기능을 구현할떄 사용이 되며 input 태그로 폼창을 나타내게 되며 사용자가 입력시 제출을 하기 위해 type=”submit” 속성을 이용하여 사용자 정보를 받을수 있는 제출 박스를 만들수 있습니다.
로그인 폼 기본태그
사용자 정보를 전송하기 위해서 form action=”전송할주소” 속성을 이용하여 사용자가 입력한 정보를 서버로 전송할수가 있습니다. 기초 구현은 아래와 같습니다.
<html>
<head>
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<input type="submit">
</body>
</html>
폼 텍스트 입력
input type 태그에 value=”텍스트” 속성을 적용하여 사용자가 알기 쉽게 예제로 텍스트를 입력해 놓을수가 있습니다.
<html>
<head>
</head>
<body>
<form action="">
<p>text : <input type="text" name="id" value="text"></p>
<p>password : <input type="password" name="pwd" value="password"></p>
<p>textarea :
<p> <textarea cols="50" rows="3">텍스트를 입력하세요.</textarea> </p>
<input type="submit">
</form>
</body>
</html>
스타일시트 디자인
폼 기능을 이해하였다면 이제 로그인창을 좀더 가독성있게 꾸며주기 위해서 최소한의 CSS를 사용하였으며 style form{}, input, textarea{} 속성을 이용하여 꾸며보도록 하겠습니다.
margin: 0 auto: 마진값으로 여백을 적당히 조절하고, width: 높이값, padding: 값으로 여백을 1em 주었으며, border: 테두리 값을 1px 을 적용하였습니다.
<style>
form {
margin: 0 auto;
width: 310px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
input, textarea {
font: 1em sans-serif;
width: 300px;
border: 1px solid #999;
}
</style>로그인 폼 완성하기
html form input 속성을 이용하여 간단하게 로그인 폼을 이해하기 쉽게 구현해 보았으며, CSS 스타일시트를 사용자가 이해하기 쉬운 속성값만을 적용하여 만들어 보았습니다.
<html>
<head>
<style>
form {
margin: 0 auto;
width: 310px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
input, textarea {
font: 1em sans-serif;
width: 300px;
border: 1px solid #999;
}
</style>
</head>
<body>
<form action="">
<p>아이디 : <br><input type="text" name="id" value="text"></p>
<p>패스워드 : <input type="password" name="pwd" value="password"></p>
<p>텍스트폼:
<p> <textarea cols="50" rows="3">텍스트를 입력하세요.</textarea> </p>
<input type="submit">
</form>
</form>
</body>
</html>
▤ 목차
목차 보이기
