HTML5 & CSS3

폼 관련 태그들 

폼이란? 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들을 모두 폼이라고 합니다. 

 

<form> - 폼 만들기

기본형 

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

폼 태그의 속성

method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.

                속성값 : get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다

                              post : 대부분 이 방식을 사용합니다. 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드                                         러나지 않습니다.

name :  폼의 이름을 지정합니다

action : <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다

target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다. 

 

autocomplete 속성 - 자동완성기능

 

<label> 태그 - 폼 요소에 레이블 붙이기 

레이블이란? 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 의미 

label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음

<label [속성 = "속성 값" ] > 레이블 <input ... > </label>
or
<label for = "id이름"> 레이블 </label>
<input id = "id이름" [속성 = "속성 값"]>
checkbox -다중선택가능
radio - 단일 선택 가능 

<fieldset> . <legend> 태그 - 폼 요소 그룹으로 묶기 

 

<fieldset> 태그와 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려주고 

<legend> 태그는 묶은 그룹에 제목을 붙여줍니다 

<fieldset [속성 = " 속성 값" ] > ... </fieldset>

type = "hidden" - 히든 필드 만들기

 

사용자에게 굳이 보여줄 필요가 없지만 관리자가 알아야 하는 것

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