Web 개발/HTML.CSS

HTML/CSS - input

hooni40 2021. 5. 28. 22:00
728x90
반응형

안녕하세요, 지난번에 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>

3개 중에 하나만 선택이된다

multiple : type="file"일 때 여러 개의 파일을 불러올 수 있도록 만들어 줍니다.

 

 

728x90
반응형