<input> 태그 정의
input 태그는 input뜻 그대로 사용자가 "데이터를 입력할 수 있는 필드"를 지정한다.
input 태그는 가장 중요한 형식 요소로써 "어떤 유형의 속성"을 갖느냐에 따라 여러가지 방법으로 표현될 수 있다.
<input> 태그 attribute 속성들
- type(필수 속성)
어떤 방식으로 입력받을 것인가에 대해 명시하는 것 위 사진에서는 button형이었다. button형 외의 type속성들은 밑에 일부 기술하겠다.
- name
서버로 보내질 이름을 입력하는 것으로 명시해주는 것을 뜻하는데 radio나 checkbox같은 경우 name을 통하여 가시성을 높일 수 있다.
- label
reference를 보면 팁에 <label> 속성을 이용하라고 한다.
밑 코드와 같이 <label>태그의 for=""을 이용하여 명시한 것은 <input>태그에서 id=""로 연관지을 수 있고 <label>태그의 나이: 부분을 클릭하면 text박스를 나타낸다.
<body>
<label for="input-age">나이:</label>
<input type="text" id="input-age">
<input type="submit">
</body>
- value
뜻 그대로 value에 선언된 값이 실제 적혀있는 값으로 나타난다.
- placeholder
value와는 다르게 실제 값이 아닌 허상 값으로 사용자가 입력하면 지워진다.
- required
필수 입력 사항을 나타나게 해준다. 한 번쯤은 꼭 보았을 것이다.
- size
말 그대로 화면에 몇 글자까지 나타날 수 있게 할 것인지 설정한다.
- max(min)length
size와는 조금 다르게 몇 글자까지 쓸 수 있게 할 것인지 설정한다.
이 외에도 다른 attritubes 속성들이 더 존재한다.
<input> 태그 type속성들
- <input type="text">:default value이며 문자열을 입력받는 네모 생성
- <input type="button">:위 사진 참조
- <input type="password"> : 흔히 볼 수 있는 비밀번호 입력받는 것
- <input type="checkbox">:설문조사 시 사용하는 체크박스
- <input type="color">:RGB에 따른 색깔 선택 가능
- <input type="radio">:체크박스와 용도가 유사하나 라디오 버튼이 생기는 것
- <input type="file">:파일을 첨부해야 할 때
- <input type="number">:음수,양수를 위 아래 버튼을 눌러 표현할 수 있음
- <input type="search">:text와 유사하나 x를 눌러 입력한 문자열을 지울 수 있음
- <input type="submit">:제출이 쓰여있는 클릭가능한 버튼을 생성
- <input type="hidden">:숨겨진 입력필드다.
이 외에도 다른 month,url,week,date 같은 속성들이 더 존재한다.
마지막 hidden 속성에 의문이든다.
숨겨진 입력필드는 웹 페이지에서 보이지도 않는데 왜 필요할까?
화면에는 어떠한 표시도 나타나지 않지만 DB 기록 전달과 type 속성이 ~이고 name 속성이 ~로 적용된 value 값을 서버로 전송시켜주기 때문에 관리자에게는 매우 중요한 속성 중 하나라고 할 수 있습니다.
출처:https://www.w3schools.com/TAGS/tag_input.asp
https://abcdqbbq.tistory.com/63
https://coding-food-court.tistory.com/17
'Web' 카테고리의 다른 글
[CSS]Position 속성에 대해(absolute,relative,static,fixed,sticky) (0) | 2022.10.03 |
---|---|
[HTML] <a> 태그 정의/용도/예시 (0) | 2022.09.12 |