이번 포스팅에서는 HTML의 입력요소인 input 태그에 대해 정리했습니다.
저번 포스팅에서 다뤘던 링크 태그 (a 태그)와 목록 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그
이번 포스팅에서는 HTML의 링크 태그인 a태그와 목록 태그에 대해 정리해봤습니다. 저번 포스팅에서 다뤘던 HTML 태그의 전역 속성에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다! HTML 기초 5
mlngwandev.tistory.com
input 태그
- 사용자가 입력한 것을 받을 수 있는 대화형 컨트롤 (= 필드) 이다.
- 단일 태그이다.
- 인라인 요소이다.
속성
- 속성으로 type을 사용한다.
- type 값에 따라 입력 요소나 입력 데이터 유형이 달라진다.
- 웹 페이지 내에서 역할과 추가 속성에 따라 달라진다.
- 식별자로는 name을 사용한다.
input 태그의 다양한 속성 활용하기
기본값
- 기본값은 text 이다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>input tags!</h2>
<input /> <br />
<input /> <br />
<input /> <br />
</body>
</html><br/> 을 넣은 이유?
input 태그는 인라인 요소이기 때문이다.
박스를 바로 옆이 아닌 아래로 배치하기 위해 넣기 위해 넣어준 것이다.
결과
따로 속성을 넣지 않아도 기본값으로 text가 설정되어 있다.
따라서 본인이 text라고 입력한 사실을 확인 가능하다.
그 외의 속성들
- 속성으로는 type을 사용하는데 type에는 20여가지가 있다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>input tags!</h2>
<input /> <br /> // 텍스트 입력
<input type="button" /> <br /> // 버튼 입력
<input type="color" /> <br /> // 색상 입력
<input type="date" /> <br /> // 날짜 입력
<input type="range" /> <br /> // 범위 입력
</body>
</html>
결과
순서대로 텍스트, 버튼, 색상, 날짜, 범위 입력이 가능하게 되었다.
텍스트 외에도 다른 요소들도 입력 가능한것을 확인 가능하다.
더 많은 type 확인
아래 링크를 통해 사용 가능한 type들을 확인 가능하다.
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입
developer.mozilla.org
식별자
- 해당 입력 요소를 구별하기 위한 고유한 이름을 부여하는 것이다.
- 해당 입력 요소를 다른 곳에서 사용하기 위해 구별이 필요하다.
- 구별을 위해 고유한 이름을 부여해 식별한다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>input tags!</h2>
<input name="username" /> <br /> // 해당 입력요소는 아이디를 입력받는데 쓰임
<input type="button" name="accept" /> <br /> // 해당 입력요소는 동의를 입력받는데 쓰임
<input type="color" name="usercolor" /> <br /> // 해당 입력요소는 색상을 입력받는데 쓰임
<input type="date" name="birthday" /> <br /> // 해당 입력요소는 생일을 입력받는데 쓰임
<input type="range" name="volume" /> <br /> // 해당 입력요소는 볼륨을 조절하는데 쓰임
</body>
</html>
결과
위에서 보았던 결과와 크게 다른것이 없음을 확인 가능하다.
WHY?
단순히 해당 요소에 고유한 이름을 부여한 것이므로 사용자에게 보여지는 부분에서 달라진 점이 없다.
HTML에서 입력요소로 사용되는 input 태그에 대해 알아보았습니다.
다음 편에서는 또 다른 입력요소인 select 태그, textarea 태그, form 태그에 대해 알아보겠습니다.
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 9편 (마지막) - meta 태그와 viewport (0) | 2023.07.22 |
|---|---|
| HTML 기초 8편 - 또 다른 입력요소 (select, textarea, form 태그) (0) | 2023.07.11 |
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
