728x90
반응형
ㅁ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* form { border: 1px solid black; border-radius: 5px; width: 500px; margin: 0 auto; padding: 10px 20px; } */ input, select,button{ width : 100%; height: 50px; } h1 {text-align: center;} button {margin-top:10px;} button:active {background-color: yellow; border:1px solid red; border-radius: 5px;} button:hover{ background-color: aqua; cursor:pointer; } div#paDiv {width:500px; padding: 10px 15px; margin:10% auto; border: 1px solid black; border-radius: 5px;} * {box-sizing:border-box;} </style> </head> <body> <div id="paDiv"> <form> <h1>회원가입</h1> <input type="text" name="id" pattern="[a-zA-Z0-9_]+" placeholder="아이디를 입력해주세요."><br> <input type="password" name="pw"pattern="[a-zA-Z0-9_!]+"placeholder="비밀번호를 입력해주세요."><br> <input type="text" name="nm"pattern="[a-zA-Z가-힣\s]+"placeholder="이름을 입력해주세요."><br> <input type="email" name="email" pattern="[a-zA-Z_\-\.]+[@][a-zA-Z]+[.][a-zA-Z]+[.]*[a-zA-Z]" placeholder="이메일을 입력해주세요."><br> <input type="tel" name="tel" pattern="(010)[0-9]{4}[0-9]{4}" placeholder="전화번호를 입력해주세요."><br> <select name="gender"><br> <option value="">성별선택</option> <option value="n">선택안함</option> <option value="m">남자</option> <option value="f">여자</option> </select><br> <button type="submit">전송</button> </form> </div> </body> </html>
728x90
반응형
'[CSS]' 카테고리의 다른 글
| [CSS] web Font (0) | 2024.02.22 |
|---|---|
| [CSS] position (0) | 2024.02.22 |
| [CSS] Float, overflow (0) | 2024.02.22 |
| [CSS] Float (0) | 2024.02.21 |
| [CSS] css, display (0) | 2024.02.21 |