![[HTML] <input> 태그 정의/속성/예시 (hidden 속성에 대하여)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdk2ItX%2FbtrMIwFc0H9%2FTKUhx1EqltxthziHH1oN0K%2Fimg.png)
<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
HTML input tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://abcdqbbq.tistory.com/63
[html 태그] input, label 태그 (속성, 특징)
웹 페이지 작업을 하면서 input태그는 뺄 수 없는 요소이다. 텍스트, 비밀번호, 체크박스, 버튼 등 여러가지 다양한 용도로 사용할 수 있다. 1. input 태그의 사용 (with. label) 기본적으로 input 태그는
abcdqbbq.tistory.com
https://coding-food-court.tistory.com/17
input label 태그 연결
html에서 사용자 데이터를 입력 받을 때 input 태그를 사용 합니다. 1. input 속성들 type="text" : 문자를 입력 type="password" : 비밀번호 입력 type="button" : 버튼 type="submit" : form 데이터를 제출시 t..
coding-food-court.tistory.com
'Web' 카테고리의 다른 글
| [CSS]Position 속성에 대해(absolute,relative,static,fixed,sticky) (0) | 2022.10.03 |
|---|---|
| [HTML] <a> 태그 정의/용도/예시 (0) | 2022.09.12 |