[HTML] input 사용법

html input 썸네일

HTML input

 

input태그는 문서에서 사용자가 입력을 할 수 있게 해주는 역할을 합니다,

 

여러가지 다양한 input이 존재하고 그 input으로 여러가지를 할 수 있습니다.

 

input의 유형

유형 type	설명
text	문자를 적을수 있다
checkbox	체크 박스를 만든다
button	버튼으로 입력을 할 수 없지만 form을 전송할 수 있다
date	날짜 달력을 생성에 고를수 있다 (HTML5 이상)
color	원하는 색상을 고를수 있게 해준다. (HTML5 이상)
file	파일을 첨부 할 수 있게 해준다
hidden	보이지 않게 한다.(영역도 존재 하지 않는다)
number	숫자만 적을 수 있다 (HTML5 이상)
range	범위를 지정하여 선택 할 수 있게 해준다 (HTML5 이상)
submit	제출버튼 (button과 다르다) 오로지 전송을 위한 버튼
tel	전화 번호 입력가능
radio	체크박스와 다르게 같은 name 값 여러개 중에서 하나만 선택이 가능하게 한다
password	값이 보이지 않게 출력 된다

HTML form에서 포스팅 했듯이 input은 데이터 전송할 때 사용한다.

 

라디오나 체크박스는 객관식으로 사용되고

텍스트나 넘버는 주관식에 주로 사용되어 진다.

 

설문지, 회원가입, 시험문제, 심리테스트 등에 유용하게 사용된다.

 

https://www.surveytop.co.kr/post/%EC%8B%A0%EC%A0%9C%ED%92%88-%EC%88%98%EC%9A%A9%EB%8F%84%EC%A1%B0%EC%82%AC

[설문지]

https://fors.tistory.com/250

[회원가입]

input의 속성

유형	설명
autocomplete	자동완성기능
disabled	사용 불가능으로 설정
form	form을 설정
name	input의 이름
id	input의 id
class	input의 클래스
type	input의 타입
value	input의 값
maxlength	input의 최대 자리수
minlength	input의 최소 자리수
min	최소값
max	최대값
height	input영역의 높이값
width	input영역의 가로값
checked	radio나 체크박스 타입이 체크 됨으로 설정
placeholder	input이 비워져 있을때  input에 나타나는 내용
readonly	읽기 전용 수정 불가능
required	반드시 적혀 있어야지 전송이 가능한 input
src	리소스의 주소

위에 적은 내용들 보다 훨씬 많은 input들이 존재 한다

내가 주로 적은 것들은 프로그래밍 하거나 코딩을 할때 주로 사용하는 것들을 위주로 올린것이다

 

input의 특징으로는 데이터 값을 입력 받을 수 있지만

 

form 안에 있지 않으면 데이터를 전송 할 수 없다.

 

반드시 form안에 input요소를 작성하여 데이터를 전송하자

 

자세한 내용은 이전 글을 참고 하자

 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

2021.05.04 - [웹언어/HTML] - [HTML] form 사용법

[HTML] form 사용법