html 입력받기 form input

목차

 

오늘의 목표

오늘은 웹에 정보를 입력하는 input종류와 form에 대해서 포스팅해보자!

 

 

input / form

input

 

input은 말 그대로 집어넣는다는 뜻으로

데이터를 집어 넣겠다 라는 뜻이다.

 

그런데 웹 개발자로서 중점을 두어야 하는 건,

정확한 정보를 얻는 것이다.

 

정확한 정보를 얻으면 정보를 정제하는 과정이 줄어들고,

줄어든 과정은 사용자에게 좀 더 빠르고 편한 서비스의 자원이 된다.

 

정확한 정보를 얻기 위해선

사용자에게 요구되는 정보를 올바른 형태로 적게 하는 것이 필요하다.

 

그렇기에 input의 올바른 type과 알맞은 속성을 쓰는 것이 중요하다.

 

form

 

form은 자신의 태그 안에 있는

input으로 얻은 데이터를 한 번에 다 옮기는 태그이다.

 

<form action="main.html">
  <h2>ID: 
    <input type="email" name="email" id="email" placeholder="email 주소">
  </h2>
    
  <h2>PW: 
    <input type="password" name="password" id="password" placeholder="비밀번호를 추가하세요.">
  </h2>
    
  <button type="submit" >로그인</button>
</form>

예를 통하면 email과 password라는 데이터를 한 번에 옮길 수 있다.

input type

원하는 데이터를 얻기 위해

입력받는 값의 종류를 제한할 수 있다.

 

text

문자를 입력받을 수 있다.

input의 기본형으로 type를 설정하지 않으면 text로 설정된다.

 

button

마우스, 키보드의 space bar로 활성화할 수 있는 버튼이다.

<button> 태그와의 차이점으로는 버튼 안에 넣을 수 있는 콘텐츠가 제한되어 있다.

 

checkbox

스위치, 걸림형 버튼과 같이 On/ Off로 전환할 수 있다.

 

radio

 

라디오 버튼과 같이 버튼 하나를 누르면 다른 것들은 다 off 된다.

여러 가지 종류 중에 하나만을(ex. 성별) 선택해야 할 때 좋다.

 

submit

같은 form 안에 있는 데이터를 제출(submit)한다

email

값을 입력할 때 email형식으로 텍스트 @ 텍스트가 필요하다.

@만을 요구하는 게 아니라 @뒤에도 텍스트를 요구한다.

 

password

input에 입력한 값들이 가려진다.

 

month / week / date

키보드로 직접 입력하거나,

달력 아이콘을 클릭하여 직접 날자를 선택할 수 있는 입력 타입이다.

특이사항으로 month는 year을 포함하고 있고,

date는 month와 year을 포함하고 있다.

 

range

바를 조절하여 값을 조정할 수 있다.

실시간으로 출력 값을 보여 줄 수 있는(크기 / 투명도)에 어울린다.

color

색을 선택할 수 있는 설정이다.

 

file

파일을 선택하여 입력할 수 있다.

메일 첨부파일 보내기를 생각하면 편하다.

input 속성

 

name

데이터(값)의 name(이름)을 지정해준다.

이름  :  값

출생지 : 대한민국

전화번호 : 000-0000-0000

 

기본적으로 데이터는 name : value로 기억해주면 좋다.

required

데이터를 제출(submit)할 때 이 속성을 가진 input 태그는 값을 가지고 있어야 한다.

 

value

초기값을 지정해둔다.

 

placeholder

입력을 하려 선택하면 비워지는 값.

주로 입력해야 하는 내용을 적는다.

disabled

데이터 값을 변경할 수가 없다.