MARK UP/HTML
Form - input (#14)
두비_
2020. 11. 13. 17:47
반응형
|
|
사용자에게 인풋값. 어떤 정보라던가 데이터 필드를 생성할 때 쓰는 가장 기본 태그입니다 입력하는 공용 태그라고도 불립니다
type=" " 안에 반드시 적어줘야하는 내용이 있습니다
총 코드를 올려 드리겠습니다 같이 따라하셔도되고 포스팅만 보셔도 됩니다
Git에 코드 첨부하겠습니다 사용 방법을 알고 계신 분들은 코드만 가져오시고 잘 모르시는 분들은 영상을 참조해주세요
https://github.com/kimhaeryun/hearyun_blog
input 값의 더 세세한 내용은 다음 포스팅에 올리도록 하겠습니다
2020/11/13 - [개발은 처음이라] - Form - input (#15)
Form - input (#15)
minjunkass.tistory.com
code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Form - Input</title>
<link rel="stylesheet" href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<form action="" method="GET">
<input type="text" />
<input type="text" placeholder="아이디를 입력하세요" />
<input type="text" placeholder="아이디를 입력하세요. " minlength="5" />
<input type="text" placeholder="아이디를 입력하세요. " maxlength="10" />
<input type="text" placeholder="아이디를 입력하세요. " minlength="5" maxlength="10" />
<input type="text" placeholder="아이디를 입력하세요. " minlength="5" maxlength="10" required />
<input type="text" placeholder="아이디를 입력하세요. " minlength="5" maxlength="10" disabled />
<input type="text" value="아이디를 입력하세요." />
<input type="email" placeholder="이메일을 입력하세요." />
<input type="password" placeholder="비밀번호를 입력하세요." />
<input type="url" placeholder="주소를 입력하세요." />
<input type="number" placeholder="번호를 입력하세요." />
<input type="number" min="5" placeholder="번호를 입력하세요." />
<input type="number" max="10" placeholder="번호를 입력하세요." />
<input type="file" placeholder="파일을 삽입하세요." />
<input type="file" accept=".png, .jpg" placeholder="파일을 삽입하세요." />
</form>
</body>
</html>* {
margin: 0;
box-sizing: border-box;
font-family: 'Spoqa Han Sanns', sans-serif;
}
html {
font-size: 16px;
font-family: 'Spoqa Han Sanns', sans-serif;
letter-spacing: -0.03em;
color: #212529;
}
body {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
h1 {
width: 360px;
font-weight: 100;
font-size: 32px;
line-height: 1.5;
margin-bottom: 1em;
color: #101010;
letter-spacing: -0.05em;
}
label {
display: block;
width: 100%;
font-size: 12px;
line-height: 16px;
}
input {
display: block;
width: 360px;
height: 44px;
padding: 0 12px;
border-radius: 7px;
margin-bottom: 12px;
font-size: 16px;
border: 1px solid #d3dce6;
transition: border-color 200ms ease-in-out;
}
input:focus,
input:hover,
input:active {
outline: none;
box-shadow: none;
border-color: #1fb6ff;
}
input[type='file'] {
padding-top: 10px;
}