<form>, <input> : 폼 만들기

1. <form> 만들기

<form> 태그의 기본형태와 속성은 다음과 같다.

<form [속성="속성 값"]> 여러 가지 폼 요소 </form>

속성	설명
method	사용자가 입력한 정보를 서버에 어떤 방식으로 넘겨줄 것인지 설정한다.
	속성 값	get : 주소 표시줄에 입력 정보가 보인다. 때문에 256 ~ 4096 byte 까지 데이터 크기가 한정된다.
		post : 사용자의 입력 정보를 보이지 않아 get 방식에 비하여 보안성이 크다. 또한 크기에 제한을 받지 않는다는 특징이 있다.
name	폼 태그를 구분하기 위한 이름 지정
action	폼 태그 안의 내용을 처리할 서버 프로그램을 지정(ASP, PHP, JSP 등)
target	현재 창이 아닌 다른 위치에 열리도록 설정
autocomplete	자동 완성 기능(속성 값 : on, off) 보안이 필요한 정보에는 off 설정을 하는 것이 좋다.

 

2. <input> : 사용자 입력

 

페이지에서 입력을 받기 위한 태그로 type 속성의 유형에 따라 웹 상에 표현되는 방식이 다르다.

<input> 태그의 기본형태는 다음과 같다.

<input type="유형" [속성="속성 값"]>

<input> 태그의 type 속성은 꼭 넣어줘야 하는 값으로 굉장히 다양하게 존재한다.

유형	설명
hidden	사용자의 화면에서는 보이지 않지만, 서버로 함께 넘겨지는 정보
text	한 줄 정도의 텍스트를 입력할 수 있는 텍스트 상자
search	검색 상자
tel	전화 번호 상자
url	URL 주소 입력 상자
email	메일 주소 입력 상자
password	비밀번호 입력 상자
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(y, M, d, h, m, s, ms)을 넣는다.
datetime-local	사용자 접속 지역을 기준으로 날짜와 시간(y, M, d, h, m, s, ms)을 넣는다.
date	사용자 접속 지역을 기준으로 날짜(y, M, d)를 넣는다.
month	사용자 접속 지역을 기준으로 날짜(y, M)를 넣는다.
week	사용자 접속 지역을 기준으로 날짜(y, d)를 넣는다.
time	사용자 접속 지역을 기준으로 시간(m, s, ms)을 넣는다.
number	숫자를 조절하는 화살표(음의 정수, 0 양의 정수 표현 가능)
range	숫자를 조절하는 슬라이드 막대(수치 안 보임)
color	색상 표
checkbox	2개 이상 선택 가능한 체크 박스
radio	1개만 선택 가능한 라디오 버튼
file	파일 첨부
submit	서버 전송 버튼
image	이미지
reset	리셋
buttom	버튼

 

🔷 type = "hidden"

 

hidden 은 앞서 말했듯이 사용자의 화면에서는 보이지 않는 정보이다.

어떤 정보를 hidden으로 설정해야 할까?

바로 사용자에게는 굳이 보여줄 필요가 없지만 관리자 측에서는 알아야 하는 정보를 보내는 것이다.

<input type="hidden" name="이름" value="서버로 넘길 값">

이런 식으로 사용 가능하며 <input> 태그에서 지정한 이름으로 값이 넘어가게 된다.

 

🔷 type = "text"

 

text 는 한 줄짜리 텍스트를 입력하는 것으로

주로 아이디, 이름, 주소 등을 입력 받을 때에 사용하는 필드이다.

다음과 같이 활용할 수 있다.

<input type="text" name="파라미터 이름" value="기본값" size="텍스트 필드의 크기" maxlenght="작성 가능한 최대 글자수">

여기서 주의해야 하는 속성은 size 와 maxlength 이다.

size 는 항상 maxlenght 보다 크거나 같아야 텍스트 필드에 작성한 글자를 한 번에 확인할 수 있다.

<input type="text" name="test1" placeholder="이곳에 작성해 주세요" size="5" maxlength="20">
<input type="text" name="test2" placeholder="이곳에 작성해 주세요" size="20" maxlength="20">

🔷 type = "password"

 

이번에는 비밀번호를 입력 받는 필드를 만들어 보자.

이 필드도 텍스트 필드와 비슷하지만 눈으로 보여지는 글자가 다르다.

<input type="text" name="textField" placeholder="이곳은 텍스트 필드입니다." size="20">
<input type="password" name="passwordField" placeholder="이곳은 비밀번호 필드입니다." size="20">

텍스트 필드에 value 값은 그대로 노출되었지만, 비밀번호 필드의 value 값을 점으로 표현된 것을 확인할 수 있다.

 

🔷 type = "search", "url", "email", "tel"

 

텍스트 필드에서 시작된 필드로 텍스트 필드에서 사용할 수 있는 속성을 똑같이 사용할 수 있다.

<input type="text" name="textField" placeholder="이곳은 텍스트 필드입니다." size="20">
<input type="search" name="searchField" placeholder="이곳은 검색 필드입니다." size="20">
<input type="url" name="urlField" placeholder="이곳은 URL 필드입니다." size="20">
<input type="email" name="emailField" placeholder="이곳은 Email 필드입니다." size="20">
<input type="tel" name="telField" placeholder="이곳은 전화번호 필드입니다." size="20">

텍스트 필드로 시작되었기 때문에 웹 페이지에서의 모습도 굉장히 텍스트 필드와 유사하다.

그렇다면 왜 텍스트 필드가 있음에도 다른 필드를 추가적으로 만든 것일까?

그것은 각 필드마다 일정한 포멧을 갖춰야 했기 때문이고, 일종의 편의성을 제공하기 위해서이다.

 

검색 필드의 경우에는 필드를 선택하고 어떠한 검색어를 넣었을 경우

전체 삭제가 가능하도록 [❌] 버튼이 표시되는 것을 확인할 수 있다.

이밖의 다른 필드들도 각 속성에 맞게 입력값을 받아 필드에 맞는 입력값을 입력했는지에 대한 유효성 검사를 대신 해준다.

 

🔷 type = "number", "range"

 

숫자를 나타내는 두 필드는 다음과 같은 차이가 있다.

<input type="number">
<input type="range">

number 필드의 경우에는 브라우저마다 지원하는 형태가 다르기 때문에 화살표로 표현되는 스핀 박스가 아닐 수 있다.

때문에 숫자를 직접 입력하는 방식과 스핀 박스가 함께 쓰인다.

속성	설명
min	필드에 입력 가능한 최솟값 지정, range 의 기본 최솟값은 0
max	필드에 입력 가능한 최대값 지정, range 의 기본 최대값은 100
step	짝수나 홀수 등 특정 숫자로 제한하고자 할 때의 숫자 간격 지정 기본값은 1이며, 이는 생략 가능하다.
value	필드에 표시되는 초기값

<input type="number" value="1" min="0" max="10" step="1">
<input type="range" value="1" min="1" max="5">

 

🔷 type = "radio", "checkbox"

 

사용법은 동일하지만, 몇 가지를 선택할 수 있느냐에 따라 "radio", "checkbox" 를 사용한다.

여러 가지 항목을 선택할 수 있도록 하려면 checkbox 박스 필드를,

하나의 항목만을 선택할 수 있도록 하려면 radio 박스 필드를 사용한다.

속성	설명
name	박스 속성를 여러 개를 만들 경우, 각 박스 속성에 대한 구분을 위하여 이름을 지정 같은 속성은 같은 이름을 같는다.
value	사용자가 선택한 내용의 값을 어떠한 값으로 서버에 넘길지 지정
checked	기본적으로는 아무것도 선택되지 않은 상태이지만 checked를 설정하면 기본으로 표시하는 항목이 생긴다.

<input type="radio" name="radio" value="1">1
<input type="radio" name="radio" value="2">2
<input type="radio" name="radio" value="3">3

<input type="checkbox" name="checkbox" value="1">1
<input type="checkbox" name="checkbox" value="2">2
<input type="checkbox" name="checkbox" value="3">3

📌 checkbox 에서 name 의 이름을 전부 다르게 지정할 때

이러한 경우에는 value 값을 따로 지정하지 않아도 되고, 

선택된 값은 value 값이 'on'으로 서버로 넘어가 boolean 타입으로 처리하는 경우도 있다.

 

🔷 type = "color"

 

색상 값을 16 진수로 표현되며 red, yellow 같은 색상명은 사용할 수 없다.

<input type="color">

value로 색상의 기본값을 설정할 수 있고, 설정하지 않으면 #FFF(검정색) 으로 표현된다.

 

🔷 type = "date", "month", "week"

 

기본 형태는 다음과 같이 나타낼 수 있다.

<input type="date | month | week" [value="기본 값" 속성="속성 값"]>

date 필드에서 선택한 값은 "yyyy-mm-dd" 형식으로 "연-월-일" 이 표현되고,

month 필드에서 선택한 값은 "yyyy-mm" 형식으로 "연-월"이 표현되며,

week 필드에서는 앞의 두 필드와는 다르게 1월 첫째 주를 기준하여 선택한 주차가 몇 번째 주인지에 대한 정보를

표현하는데 예를 들어 24번째 주차를 표현하면 "yyyy-W24" 로 나타낸다.  

<input type="date">
<input type="month">
<input type="week">

  🔷 type="time", "datetime-local"

 

기본 형태는 다음과 같이 나타난다.

<input type="time | datetime-local" [value="기본 값" 속성="속성 값"]

날짜와 시간 필드에 공통적으로 사용하는 속성은 다음과 같다.

속성	설명
min	날짜나 시간의 최솟값 지정
max	날짜나 시간의 최댓값 지정
step	어느 정도씩 증감시킬 것인지 지정
value	type="time" 필드의 경우에는 00:00 부터 23:59 까지 입력 나머지는 날짜 다음 키워드 T 를 작성하고 24 시간으로 지정한다. 예를 들어 오후 5시는 T17:00 로 나타낸다.

<input type="time" value="09:00">
<input type="datetime-local" value="2022-10-08T09:00">

예제에서도 알 수 있듯이

time 필드에서는 시간만을 조절할 수 있고, datetime-local 필드에서는 시간과 날짜 모두를 조절할 수 있다.

 

🔷 type="submit", "reset"

 

reset 필드는 해당 페이지에서 사용자가 작성한 정보를 모두 지울 수 있도록 하는 필드이며,

submit 필드는 해당 페이지에서 작성한 정보를 서버로 전송하는 필드이다. 

이 때 전송되는 곳은 <form> 태그에서 작성한 action 속성에 지정한 내용에 따라 넘어 간다.

 

기본 형태는 다음과 같다.

<input type="submit | reset" [value="버튼 내용"] [속성="속성 값"]>

<input type="submit" value="제출">
<input type="reset" value="다시 쓰기">

📌 submit 과 reset 필드는 input 태그를 사용하기 보단 button 태그를 사용하는 것이 유용하다.

<button>submit</button>
<button type="reset">reset</button>

button 태그의 type 속성은 submit 이 기본값이기 때문에 submit 기능을 사용할 때는 예시와 같이 삭제도 가능하다.

type 으로는 submit, reset, button 을 사용할 수 있다. 

 

🔷 type="image"

 

submit 버튼 대신 이미지를 넣어 해당 이미지를 클릭할 때 submit 버튼을 누른 것도 같은 효과를 줄 수 있다.

기본 형태는 다음과 같다.

<input type="image" src="경로" alt="대체 텍스트" [속성="속성 값"]>

 

🔷 type="button"

 

버튼 필드는 버튼을 눌렀을 때 어떠한 기능을 수행하도록 의도하는 필드이다.

보통 스트립트 함수 등을 이 때 활용할 수 있다.

 

기본 형태는 다음과 같다.

<input type="button" [value="버튼 내용"] [속성="속성 값"]>

<input type="button" value="새 탭 열기" onclick="window.open()">

📌 input 태그보다는 button 태그를 사용하자

 

 

🔷 type="file"

 

파일 필드는 파일을 첨부할 수 있도록 하는 필드로 [파일 선택] 또는 [찾아보기] 등의 버튼과 함께 생성된다.

<input type="file">

📌 file 속성 버튼 모양 변경하는 법

이 자체로는 css 가 적용되기 힘들기 때문에 lable 태그로 파일을 묶어 적용하는 것이 좋다.

이 때 file 속성은 보이지 않게 하고 label 에 css 적용이 가능한 이미지 등을 붙여 적용하는 방식으로 하면 

기능을 파일 속성 기능 그대로 사용 가능하고, 보여지는 모양은 원하는 대로 커스텀이 가능해진다.