-
form 태그 파헤치기웹 프로그래밍/FE(Front-End) 2021. 7. 1. 22:36
오늘은 HTML을 공부하던 중 평소에는 별 관심없이 썼던 form태그에 많은 기능이 있다는 것을 알고 정리해보려고 한다.
먼저, form태그의 이용성을 간단히 얘기해보면 웹에서 로그인이나 회원가입 페이지를 구현할 때 자주 사용되고 검색 사이트나 쇼핑몰 주문서 화면에서도 form태그를 이용하기도 한다.
티스토리 로그인 페이지도 form태그를 사용 그러면 form태그에는 어떠한 기능을 가지고 있을까?
먼저, form태그와 같이 선언되는 속성에 대해 알아보자.
속성 설명 method 사용자가 입력한 내용들을 서버로 넘겨주는 방법을 지정하는 속성으로 GET, POST 중 원하는 속성값을 지정 name 폼의 이름을 지정하는 속성으로 한 HTML 문서 안에 여러 개의 form태그가 있을 경우 form을 구별하기 위해 사용 action form 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정 target action 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정 위 4가지 속성이 가장 흔히 쓰는 속성인데 이외에도 우리가 무심코 지나간 기능을 구현할 수 있는 속성이 있다.
먼저, autocomplete 속성이다.
우리가 입력박스에 ratel을 적으려고 했다고 생각해보자.
우리는 r만 입력했는데 예전에 ratel을 입력했던 것을 컴퓨터가 기억하고 있어 아래에 ratel이 보여지는 것을 볼 수 있다.
이처럼 자동완성기능을 켤지 말지를 지정할 수 있는 것이 autocomplete 속성이다.
autocomplete 속성은 우리가 선언하지 않아도 기본값이 on이여서 자동완성기능이 켜지는데
만약 자동완성기능을 쓰고 싶지 않는다면,
<form autocomplete="off">...</form>으로 form 태그 안에 선언하면 된다.
이제 form 속성에 대해 알아봤으니 form 태그 안에서 쓰이는 태그에 대해서 알아보자.
1) <fieldset>, <legend> 태그
먼저, <fieldset>, <legend> 태그이다.
우리가 쇼핑몰 사이트에서 물품을 구매하려고 할 때 배송지 정보와 보내는 사람 정보가 같은 페이지에 있지만 분리되어 있는 모습을 본 적이 있을 것이다.
이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려 할 때 <fieldset>, <legend> 태그가 사용된다.
<fieldset> 태그는 <fieldset> </fieldset> 태그 사이의 것들을 하나의 영역으로 묶어 외곽선을 그려 주고
<legend> 태그는 <fieldset>태그로 묶은 그룹에 제목을 붙여주는 역할을 한다.
2) <input> 태그
input 태그는 우리가 가장 많이 사용하는 태그일 것이다.
input 태그를 사용하여 아이디나 비밀번호, 주소 등 다양한 사용자 정보를 입력받고자 할 때 사용한다.
이러한 input 태그에는 다양한 속성을 가지고 있다.
먼저, autofocus 속성이다.
autofocus 속성은 웹 페이지가 불러와졌을 때 폼 요소 중에서 마우스 커서가 보여지는 요소를 정할 수 있는 속성이다.
<input autofocus required>로 선언하면 해당 input요소에 처음 웹 페이지가 보여지면 마우스 커서가 올라가게 된다.
다음으로 placeholder 속성이다.
placeholder 속성은 해당 input박스에 어떠한 형태의 입력값을 입력해야하는지 알려주고자 할 때 사용하는 속성이다.
<input placeholder = "설정하고 싶은 힌드 값입력">으로 원하는 문구를 선언하여 사용자에게 힌트를 줄 수 있다.
다음으로 required 속성이다.
required 속성은 해당 input에 필수로 입력값을 넣어야한다는 것을 알려주는 기능을 하는 속성으로 만약에 required 속성이 설정된 input에 입력값을 주지 않고 제출버튼을 누르면 작은 경고 문구가 나오게 된다.
<input required = "required"> 또는 <input required>로 선언하면 required 기능을 사용할 수 있다.
이외에도 input 태그에 줄 수 있는 속성과 input태그의 모습을 바꿔주는 type속성에 줄 수 있는 속성값이 다양하게 존재한다.
더 알고 싶다면 아래 링크를 통해 확인하면 좋을 것 같다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML
요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
developer.mozilla.org
3) <label> 태그
label 태그는 해당 요소가 어떠한 것을 의미하는지 알려주는 문구를 붙여주는 기능을 한다.
예를 들면, 아이디를 입력해야하는 input요소와 비밀번호를 입력해야하는 input요소가 있다면 각각 아이디와 비밀번호를 입력해야한다고 문구를 적어주는 것이다.
label태그로 라벨값을 주는 방법은 2가지이다.
<!--방법 1--> <label> 라벨명 <input...> </label> <!--방법 2--> <label for ="id값"> 라벨명</label> <input id = "id값">이렇게 label 태그는 해당 요소가 무엇을 의미하는지 알려주는 기능 이외에 다른 기능도 한다.
라디오 버튼이나 체크박스와 label태그를 같이 사용한 경우이다.
label 태그를 같이 사용한 경우와 사용하지 않은 경우를 살펴보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p, label { font-size: 40px; } </style> </head> <body> <form> <p><input type="checkbox">체크박스1</p> <label><input type="radio">라디오박스1</label> </form> </body> </html>아래 영상을 보면 label태그를 쓰지 않은 checkbox는 체크박스1이라는 문구를 클릭해도 checkbox가 선택되지 않는다.
하지만, label태그로 싸인 radio는 라디오박스1이라는 문구를 클릭하면 radio가 선택되는 것을 볼 수 있다.
이것이 label태그의 또 다른 기능이다.
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
JSON이란? (0) 2021.07.05 브라우저 객체(BOM) (0) 2021.07.04 [에러 수정] Uncaught TypeError: $.ajax is not a function (0) 2021.06.29 JQuery 접해보기 (0) 2021.06.27 HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role) (0) 2021.06.26