안녕하세요, 지난번에 form에 관해 정리하면서 input 태그를 이용하여 로그인 형태를 확인해보았습니다.
오늘은 input에 대해 정리해보겠습니다.
input은 많은 속성들을 가지고 있는데 하나씩 정리해보겠습니다.
type : 입력받을 데이터의 종류를 나타냄 (기본값 : text)
-. button / color / checkbox / email / password / image / number(숫자만 입력받기) / reset 등등
이전에 로그인 버튼을 <button>을 사용하여 만들었는데요, input 태그를 이용해서도 로그인 버튼을 만들 수 있습니다!
type을 button으로 하고 value를 "로그인"으로 하면 동일한 버튼이 생성 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="/login" method="GET">
<input type="email">
<input type="password">
<input type="button" value="로그인">
</form>
</body>
</html>
위의 button은 실제로 버튼 모양으로 누르는 것은 가능하지만 눌렀을 때 발생하는 행동은 명시가 되어있지 않습니다.
이 button과 동일하게 생겼지만 서버로 데이터를 전송하겠다는 type이 바로 submit입니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="/login" method="GET">
<input type="email">
<input type="password">
<input type="submit" value="로그인">
</form>
</body>
</html>
위 코드를 실행하게 되면 login 페이지로는 가게 되고 method가 GET속성이므로 URL에 email과 password가 나와야 하는데 실제로는 email과 password 정보가 url에 안 나옵니다.
URL에 정보가 뜨게 하기 위해 사용하는 속성이 name입니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<form action="/login" method="GET">
<input type="email" name="id">
<input type="password" name="pw">
<input type="submit" value="로그인">
</form>
</body>
</html>input 태그에 name을 추가하여 다시 사이트를 열어보겠습니다.
제가 설정하였던 name에 입력값들이 들어간 것을 확인할 수 있습니다!
value : 페이지를 열었을 때 기본값을 설정 (type에 맞아야 합니다)
ex. type = "number"인데 value="사랑" 이면 적용이 안됩니다.
ex. type="submit" value = "제출" [버튼 형식으로 나오게 됨]
ex. type="reset" value = "초기화" [버튼 형식으로 나오게 됨]
readonly : value로 지정한 초기값을 사용자가 못 고치게 할 때 사용합니다 (=disabled)
placeholder : 입력 칸에 글자를 나타나게 할수 있다.
value에서 type이 number이면 글자가 입력칸에 못 들어가게 되지만 placeholder를 이용해 처음에 나타나게 할 수 있다!
(숫자를 입력하는 순간 다 사라짐)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<input type="number" placeholder="숫자를 입력하세요!">
</body>
</html>
checked : type="checkbox" or "radio" 일 때 체크된 것이 기본상태이도록 만들어 줍니다.
나중에 프로젝트 만들 때 radio를 사용할 것 같아 꿀팁(?)하나만 정리하고자 합니다.
설문이나 선택지에서 필수로 선택을 해야 할 때 radio 버튼을 사용하게 되는데 이때 코드는 아래와 같이 사용하면 좋을 것 같습니다. 여기서 주의할 점은 같은 name으로 radio를 묶어야 3개 중에 하나만 선택이 된다는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<input type="radio" name="radio1" checked>
<input type="radio" name="radio1">
<input type="radio" name="radio1">
</body>
</html>
multiple : type="file"일 때 여러 개의 파일을 불러올 수 있도록 만들어 줍니다.
'Web 개발 > HTML.CSS' 카테고리의 다른 글
| HTML/CSS - select / option/datalist (0) | 2021.05.30 |
|---|---|
| HTML/CSS - button (0) | 2021.05.29 |
| HTML/CSS - form (0) | 2021.05.27 |
| HTML/CSS - Inline/block (0) | 2021.05.22 |
| HTML/CSS - Position (0) | 2021.05.18 |
댓글