[HTML] 양식 태그

[HTML] 양식 태그

※ 카테고리 [TIL 치즈 조각]은 제가 공부하면서 얻은 (작은) 정보들을 정리하는 공간입니다.

따라서 [TIL 치즈 조각] 게시물은 수정되거나, 잘못된 정보가 있을 수 있다는 점 유의하시기 바랍니다.

(잘못된 부분에 대해서는 피드백 부탁드립니다.)

HTML 양식 태그

양식 form

요소는 사용자에게 양식데이터를 넘겨받기 위한 컨텐츠를 담는 구역을 나타낸다.

actoin 속성으로 양식데이터를 처리할 URL을 지정할 수 있다.

method 속성으로 데이터를 넘겨주는 방식을 선택할 수 있다. 속성 값으로 get과 post를 사용할 수 있으며, get은 URL을 통해 데이터를 전송하는 방식이고, post는 URL이 아닌 다른 방식으로 데이터를 전송하여 데이터를 숨기는 방식이다.

입력 input

요소는 사용자에게 데이터를 입력받는 컨트롤을 형성한다.

입력받는 값의 구분을 위해 name 을 지정해주는 편이 좋고, value 속성으로 입력 전 기본값을 설정할 수 있다.

사용자가 value 속성으로 입력된 기본값이 아닌 다른 값을 입력하고 싶다면 설정된 기본값을 직접 지워줘야 한다.

'이름을 입력해주세요'와 같은 텍스트가 표시되어 있다가 한 글자라도 입력하면, 해당 텍스트가 자동으로 사라지는 동작을 사용하고 싶으면 placeholder 속성을 사용하면 된다.

요소는 속성 type 의 값에 따라 수행하는 동작이 크게 달리진다. 사실상 이 속성이 핵심이다.

더보기 type 의 기본값은 type="text" 이며, 일반적인 텍스트를 입력받는다.

type="number" : 숫자만을 입력받는다. 모바일 장치 등에서는 입력 시에 알아서 숫자 키패드를 띄운다.

type="password" : 비밀번호를 입력받기 위해 사용한다. 입력값이 화면상에 가려진 상태로 나타난다. type="button" 은 누를 수 있는 버튼을 생성한다. 단, 그냥 이것만 만들어 놓으면 눌러도 아무 동작도 안 한다. 어떤 행동을 하게 하려면 JavaScript가 필요하다.

type="reset" : 이 요소가 속한 내부의 입력된 모든 양식데이터를 기본값으로 리셋한다.

type="submit" : 입력된 양식데이터를 서버로 제출한다. type="checkbox" : 선택/해제할 수 있는 체크박스를 생성한다. 같은 name 속성을 가진 다수의 체크박스를 동시에 선택할 수 있다.

type="radio" : 선택/해제할 수 있는 동그란 버튼을 생성한다. 같은 name 속성을 가진 다수의 버튼 중 하나만 선택할 수 있다. 2개 이상을 선택하면 마지막으로 선택한 버튼 외에 같은 name 을 가진 다른 버튼은 모두 선택해제 된다. type="tel" : 전화번호를 입력받는다. 일부 장치에서는 전화번호 입력을 위한 키패드로 전환된다.

type="e-mail" : 이메일을 입력받는다. 일부 장치에서는 이메일 입력이 편리한(@을 포함하는) 키패드로 전환된다. type="date" : 연/월/일을 입력할 수 있는 컨트롤. 일부 브라우저에서는 선택 시 날짜 선택을 위한 달력을 열게 할 수 있다.

type="time" : 시간을 입력하는 컨트롤. 12시간 양식 / 24시간 양식 중 원하는 것을 고를 수 있다.

type="week" : 'XX년 XX번째 주'의 형식으로 입력할 수 있는 컨트롤.

type="month" : ''XX년 XX월'의 형식으로 입력할 수 있는 컨트롤. type="hidden" : 사용자에게 보이지 않지만, 설정된 name 과 value 값을 전송한다. type="file" : 파일 제출을 위한 컨트롤을 생성한다. accept 로 제출 가능한 파일형식을 지정할 수 있다.

이미지나 캡쳐가 필요한 경우 capture 로 사용할 카메라를 지정할 수 있다. (전면 / 후면) 이외 type 의 값이나 속성은 여기를 참고.

텍스트 입력 textarea

는 여러 줄의 텍스트를 입력할 수 있는 텍스트 상자를 생성한다.

cols 과 rows 로 텍스트 상자의 크기를 정해줄 수 있다. 정해진 rows 를 넘기면 자동으로 스크롤이 생긴다.

선택 select

요소는 내부의 요소 들 중 하나를 선택하는 드롭다운 툴팁을 생성한다. name 을 지정해줘야 한다.

내부의 각 은 value 로 선택 시 전송되는 값을 설정할 수 있다.

이름표 label

은 단순히 컨트롤 옆에 텍스트를 입력하는 것과 시각적으로 똑같지만, 자신의 와 동일한 아이디를 가진 컨트롤의 이름표가 된다.

컨트롤을 설명하는 이름에 단순히 텍스트를 입력하는 것보다 을 사용하는 것을 권장한다.

또한 을 클릭하면 동일한 아이디를 가진 컨트롤이 선택되므로 사용자에게 편의를 제공한다.

from http://ok-cheese-repository.tistory.com/10 by ccl(A) rewrite - 2021-09-25 20:00:48