📌 폼(Form) 양식
- HTML 에선 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 예를들어 우리가 특정 사이트에 로그인 할때 아래와 같이 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다.
이처럼 텍스트 필드, 암호 필드, 확인란, 라디오 버튼, 제출 버튼, 메뉴 등과 같은 컨트롤을 포함한 양식 통, 서버로 나의 아이디, 비밀번호를 입력해서 보내 서버의 데이터베이스에 내 정보가 있고, 이것이 일치하면 로그인이 처리되게 된다.
꼭 회원가입 / 로그인 뿐만 아니라 이렇게 주문을 하기 위해 배송지 정보를 기재하고 제출하는 것도 마찬가지이다.
이렇게 웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할때 사용되는 HTML의 태그가 바로 < form > 이다.
📌 HTML5 form 요소
HTML의 폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용 하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송해주기도 하며 이밖에 웹페이지가 입력 데이터를 사용하기 위하여 사용할 수 도 있다.
HTML의 폼에 이용되는 태그는 다음과 같이 몇가지 있다. 폼 요소는 자체적으로 양식을 생성하는 것이 아니라 < input >, < label > 등과 같은 필수 양식 요소를 포함하는 컨테이너이다. 이 태그들을 조합하여 로그인 화면 과 같이 입력 양식 화면을 구성하게 되는 것이다.
| Tag | Description |
|---|---|
| < form > | 사용 측에서 입력을 입력하는 HTML 양식을 정의 |
| < input > | 입력 컨트롤을 정의 |
| < textarea > | 다중 라인 입력 컨트롤을 정의 |
| < label > | 입력 요소의 레이블을 정의 |
| < fieldset > | 관련 요소를 양식으로 그룹화 |
| < legend > | < fieldset > 요소에 대한 캡션을 정의 |
| < select > | 드롭다운 목록을 정의 |
| < optgroup > | 드롭다운 목록에서 관련 옵션 그룹을 정의 |
| < option > | 드롭다운 목록에서 옵션을 정의합 |
| < button > | 클릭 가능한 버튼을 정의합 |
< form > 태그
- 입력 양식 전체를 감싸는 태그
- form은 컨트롤 요소(control element)로 구성된다.
| Form 태그의 속성 | 설명 |
|---|---|
| method | 전송 방식 선택 |
| - get : 256~4096 byte까지만 전송 가능 | |
| - post : 입력 내용의 길이에 제한 X | |
| name | form의 이름 |
| 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용 | |
| action | form을 전송할 서버 쪽의 script 파일을 지정 |
| 전송되는 서버 url 또는 html 링크 | |
| target | action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
| autocomplete | 자동 완성. |
| on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다. | |
| enctype | 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시 |
| - application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함. | |
| - multipart/form-data 모든 문자를 인코딩하지 않음을 명시함. 이 방식은 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함. | |
| - text/plain 공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시함. | |
| novalidate | 폼 데이터(form data)를 서버로 제출할 때 해당 데이터의 유효성을 검사하지 않음을 명시 |
red blue green<!-- /action_page.php 로 get 방식으로 태그 내의 입력값들을 제출 --> <form name="profile" action="/action_page.php" method="get" autocomplete="on"> <input type="text" name="id"> <!-- 입력란 --> <select> <!-- 드롭다운 메뉴 --> <option value="blue">red</option> <option value="blue">blue</option> <option value="blue">green</option> </select> <input type="submit" value="Submit"> <!-- 서버 제출 버튼 --> </form>
제출(submit) 버튼을 클릭하면 input 태그에 입력된 값과 select, option 태그의 선택된 메뉴값이 form 태그의 method 속성에 지정된 방식(get)으로 action 속성에 지정된 서버측의 처리 로직(/action_page.php)에 전달되게 된다. 그러면 서버에선 name 속성으로 지정된 이름으로 변수값을 받아 데이터를 얻어 처리를 하는 것이다. (위의 예제는 서버 설정이 없으니 실제로 제출되지는 않는다)
태그는 사용자의 상호작용할 입력란이나 메뉴, 버튼 태그들을 정의하고 이를 묶고 어디에 어떻게 언제 제출할지 태그 속성으로 지정하는 것으로 보면 된다.
이처럼
📌 < input > 태그
- 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
- type에 따라 어떤 형식으로 폼 양식을 정할지 결정한다 (버튼 / 이메일 입력 / 비밀번호 입력 ..등)
- 아래 표에서 빨간색으로 친 속성이 주로 쓰인다고 보면 된다
| input 속성 | 설명 |
|---|---|
| readonly | 읽기 전용 필드로 만들기 |
| placeholder | 힌트 표시(필드 클릭시 내용 사라짐) |
| autofocus | 페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것 |
| autocomplete | 자동완성 설정 |
| max / min | < input > 필드의 최대값과 최소값 지정 |
| maxLength | 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정 |
| step | 숫자의 간격 설정 |
| < input > 이 date, datetime, datetime-local, month, week,time, number, range일 경우만 사용가능 | |
| required | 필수 입력 필드 지정(빈칸이면 안 넘어감) |
| type ⭐ | input 태그의 타입을 지정 |
| 단순히 텍스트입력창인지 이메일, 전화번호 양식 혹은 파일첨부, 동영상 첨부 인지 |
First name :<form> First name :<br> <input type="text" name="firstname" maxLength="3" required><br> <!-- 필수입력 + 3자 제한 --> Last name :<br> <input type="text" name="lastname"><br> 별명 :<br> <input type="text" name="alias" placeholder="없을시 생략"> <!-- 힌트 표시 --> </form>
Last name :
별명 :
input의 type 속성 종류
HTML < input > 요소 중에 가장 중요한 속성을 type 속성이다. 이 type이 어떤 것이냐에 따라 그냥 버튼이 될수도 있고 입력 텍스트란이 될수도 있고 라디오 버튼이 될수도 있기 때문이다. 그리고 같은 입력란이라도 이메일 입력인지 전화번호 입력인지 비밀번호 입력인지 모두 구분하여, 입력이 잘못될 경우 안내 메세지를 띄우는, 사용자와 상호작용 요소를 보다 뛰어나게 해줄 수 도 있다.
| input type 속성 | 설명 |
|---|---|
| hidden | 서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 X) |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 |
| < input type="text" value="write email or phone number" size="10" maxlength="5" /> | |
| search | 검색상자 |
| (크롬이나 사파리에서만 사용 가능하며 크로스브라우징이 안되기에 잘 사용하지는 않는다.) | |
| tel | 전화번호 입력 필드 |
| < input type="tel" /> | |
| url | URL 주소를 입력 필드 |
| password | 비밀번호 입력 필드 |
| < input name="password" required type="password" placeholder="Password" /> | |
| number | 숫자를 조절할 수 있는 화살표 |
| submit | 서버전송 버튼 |
| < input type="submit" value="Log In" /> | |
| image | submit 버튼 대신 사용할 이미지 |
| reset | 리셋 버튼 |
📌 < textarea > 태그
- textarea 요소는 input 요소의 "text" 타입과 비슷한 형태이다. 하지만 "text" 타입의 input 요소는 한 줄만 입력이 가능하지만, < textarea > 태그는 여러 줄의 긴 내용을 입력하는 것이 가능하다.
` - 텍스트 창의 너비와 높이는 HTML에서는 cols, rows 속성으로, CSS에서는 width와 height 값으로 지정할 수도 있다.
` - form 태그와 함께 사용해 감상평, 자기소개서 제출 등의 용도로 사용할 수 있다.
| textarea 속성 | 설명 |
|---|---|
| autofocus | 페이지가 로드될 때 자동으로 포커스가 < textarea > 요소로 이동됨을 명시함. |
| cols | 텍스트 입력 영역 중 보이는 영역의 너비를 명시함. |
| placeholder | < textarea > 요소에 입력될 값에 대한 짧은 힌트를 명시함. |
| required | 폼 데이터(form data)가 서버로 제출되기 전 텍스트 입력 영역이 반드시 채워져 있어야 함을 명시함. |
| rows | 텍스트 입력 영역 중 보이는 영역의 라인수를 명시함. |
<form action="/examples/media/action_target.php" method="get"> <textarea name="opinion" cols="30" rows="5" placeholder="여기에 써주세요~"> </textarea> <br> <input type="submit"> </form>
📌 < label > 태그
- 레이블(label) 그 자체로는 효과가 없지만, input 태그를 제어하여 상태값을 변경 하도록 돕는 역할을 한다
- 레이블 태그를 클릭하면 텍스트 컨트롤에 초점이 맞춰져 사용성이 높아진다. 특히 모바일이나 태블릿 환경에서 강점을 발한다.
📌 콤보박스 태그
- 드롭 메뉴에서 선택을 할 수 있는 양식을 생성
- < select > 요소 내부의 < option > 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의
<label for="pet-select">Choose a pet:</label><br /> <!-- 목록 사이즈가 4줄 + shift로 다중 선택 --> <select name="pets" id="pet-select" size=4 multiple> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select>Choose a pet:
Dog Cat Hamster Parrot Spider Goldfish
📌 < feildset > & < legend > 태그
- fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다.
- legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.
Login ID :<form> <fieldset> <legend> Login </legend> ID : <input type="text" /> <br> password : <input type="password" /> </fieldset> <br> <fieldset> <legend> Login 2 </legend> E-mail : <input type="e-mail" /> <br> password : <input type="password" /> </fieldset> </form>
password :
Login 2 E-mail :
password :
📌 < button > 태그
- 버튼 요소. 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용한다.
| button type 속성 | 설명 |
|---|---|
| submit | form 제출 |
| < button type="submit"> 전송 </ button > | |
| reset | from 리셋 |
| < button type="reset"> 다시쓰기 </ button > | |
| button | 버튼의 형태만 만든다. 눌리거나 했을때 다른 동작을 하려면 따로 함수를 연결해야함 |
< button > vs < input > 차이점
위에서 배운 < input type="button" > 으로 버튼을 만들수 있던데 이 둘의 차이점은 무엇일까?
- < input > 태그는 종료태그 없이 type 속성 이용해 버튼에 글자나 이미지 넣지만, < button > 태그는 시작태그와 종료태그 사이에 글자나 이미지 넣는다
- 항상 < button > 태그의 type 속성을 명시해줘야 한다. 왜냐하면, IE(익스플로러) 경우 기본 타입이 button 이지만, 타 브라우저 경우 기본 타입이 submit 이기 때문이다.
- < form > 태그 안에서 버튼 만들 땐, 반드시 < input > 태그 이용해 버튼 만들어야 한다. 왜냐하면, 타 브라우저가 < button >태그의 속성값을 전송하는 반면, IE는 시작태그와 종료태그 사이의 텍스트나 이미지 전송하기 때문이다.
마포구 주민