티스토리 뷰

분류없음

[HTML5 기초] form과 input

깃털여사 깃털여사 2017.08.31 13:41

백엔드와의 통신을 위한 중요한 태그중의 하나가 form태그이며, 곳곳에서 사용되고 있지만,

사실 개발자의 영역과 퍼블리셔의 영역의 회색지대에 놓여 있는 애매한 녀석입니다.

사실 form태그만 잘 정리를 해둬도, 개발자분들의 이쁨을 받는 퍼블리셔가 될 수 있습니다.


또한 일반적인 퍼블리셔를 벗어나 프론트엔드 개발자를 꿈꾼다면, 

적어도 form태그와 input태그 정도는 컨텍스트에 맞게 완벽하게 코딩할 수 있도록 평소에 연습을 해 두는 것이 필요하겠죠.


시작합니다.


form태그

<form name="폼태그이름" method="데이터전송방식" action="정보를 보낼 주소"></form>

<form name="login" method="POST/GET" action="login.php"></form>


input태그

<input type="타입" name="입력폼의 이름" maxlength="최대입력가능글자수" />


input타입

text : 텍스트입력 폼

password : 비밀번호 입력 폼


checkbox : 체크박스 폼 

<input type="checkbox" name="gender" value="woman" checked />

- 이렇게 입력할 경우 체크박스에 [ 체크가 된 상태 ]로 보여지게 됩니다.

radio : 라디오박스 폼

<input type="radio" name="gender" value="man" />

<input type="radio" name="gender" value="woman" />

- 주의할 것은 name 이 같은 녀석들 중에서 단 한개만 선택할 수 있다는 점입니다. 


button : 버튼 박스

<input type="button" value="버튼에 들어갈 글자" />

- 입력 또는 선택 등 버튼에 입력할 글자는 value에 입력해줍니다. 

- 요즘은 아예 css로 버튼을 만들어버리는 경우가 종종있는데, 웹접근성을 위한 시멘틱 코딩을 위해서는 반드시 버튼은 button으로 코딩하는 것이 좋습니다.


file : 파일을 업로드할 수 있는 폼

<input type="file" name="attachedFile" />



reset : 입력초기화

submit : 입력값전송



search : 검색어입력 폼 [ NEW ]

<input type="search" name="search" />

- 검색어를 입력시에는 [x]가 생성되고, x를 누르면 입력한 검색어가 지워집니다. 아시죠?

- 이 또한 지금까지는 css로만 해 왔던 것인데 이제부터는 제대로... search 폼으로 코딩해줍시다.


email : 이메일입력 폼 [ NEW ]

<input type="email" name="email" />

- 폼 자체에서 유효성 검사를 해 줍니다. @ 마크가 없으면 submit버튼을 눌러도 제출되지 않습니다.


url : url 입력폼 [ NEW ]

<input type="url" name="url" />

- 폼 자체에서 유효성 검사를 해 줍니다. url의 형태를 갖추지 않으면 submit버튼을 눌러도 제출되지 않습니다.


number : 숫자입력 폼 [ NEW ]

<input type="number" name="num" />

- 문자는 입력되지 않는, 숫자전용입력란이 생성됩니다.

- 스마트폰에서 사용하기 위해서는... 다음과 같이 pattern을 지정합니다.

<input type="number" pattern="\d" /> (\d는 디지털, 즉 숫자를 의미합니다)


color : 색상선택창 팝업 [ NEW ]

<input type="color" />

- 색상을 선택할 수 있는 색상환 선택창이 팝업됩니다(단 브라우저에 따라 팝업되는 색상환의 UI는 달라집니다)


range : 값을 선택할 수 있는 슬라이드가 생성됩니다.

<input type="range" min="최소값" max="최대값" value="기본값" step="이동단위" />

예) 이를테면 0 에서 100 까지 선택할 수 있으며, 처음에는 50에 있다가 양쪽으로 10씩 증감하는 슬라이드UI를 만들고 싶다면, 

- <input type="range" min="0" max="100" value="50" step="10" />


placeholder : 힌트데이터 입력

<input type="text" placeholder="아이디를 입력하세요" />


------------------------------------------------


input태그와 함께 form을 이루는 태그인 label에 대해서 정리하겠습니다.

긴가민가 하거든요... 항상...^^


label 태그는 input 태그의 작은 선택창을 클릭하지 않아도, 해당 label을 클릭하는 것만으로도 input 선택창을 선택한 효과를 주므로, 사용성을 향상시킬 수 있습니다. 

<label for="rabbit">토끼</label>

<input type="radio" name="animal" value="r" id="rabbit" />

- 이렇게 사용되며, 주의할 것은 반드시 label의 for속성값과 input의 id속성값이 일치해야 세트로 묶인다는 것.

- 그리고 해당 페이지에서 id 값은 반드시 유일해야 한다는 점입니다.

(이를테면... 한 페이지에서 같은 id 값이 여러개 있는 경우, 해당 label을 클릭하면 그 id를 가진 모든 선택기가 선택되게 됩니다...)






댓글
댓글쓰기 폼
Total
81,335
Today
0
Yesterday
216
«   2019/07   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31