[html,css 기초] Form 태그 정리

 

 

 

 

form 태그

- form 요소는 사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그

- 사용자 입력을 위한 요소로 사용자로부터 정보를 수집하는 역할

 

(form태그는 웹페이지에서 로그인 폼, 회원가입 폼 등에서 이용됨)

 

 

 

 

 

1. form 태그 속성

- 폼 태그 속성에는 name, action, method, target 등이 있습니다.

 

 

action

- 폼 전송 버튼을 눌렀을 때 이동하는 페이지의 경로를 지정

- 정보를 건네받는 곳을 지정하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그

 

 

name

- 폼을 식별하기 위한 이름을 여기에 작성

- 입력 태그의 이름(서버로 전달될 때 이름에 값을 붙여서 전송)

 

 

accept-charset

- 폼 전송시 사용할 문자 인코딩을 지정

(즉 한국어나 영어와 같은 언어설정을 해준다고 생각하시면 됩니다.)

 

 

target

- action에서 지정한 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

속성값	설명
_blank	서버로부터 받은 응답을 새로우 윈도우나 탭(tab)에서 보여줌
_self	기본값으로 생략 가능. 서버로부터 받은 응답을 링크가 위치한 현재 프레임에서 보여줌.
_parent	서버로부터 받은 응답을 현재 프레임의 부모 프레임에서 보여줌.
_top	서버로부터 받은 응답을 현재 윈도우 전체에서 보여줌.
프레임 이름	서버로부터 받은 응답을 명시된 프레임에서 보여줌.

 

 

method

- 폼을 서버에 전송할 타입을 정함 (GET 또는 POST)

 

GET : 피라미터를 정보를 전송 URL에 보이게 전송시키는 방법

(보안이 필요 없고 파라미터 정보를 한눈에 보기위해 사용)

 

POST : 파라미터를 정보를 전송 URL에 보이지 않게 전송시키는 방법

(보안이 필요한 로그인이나 이런 류의 정보를 처리할 때 사용하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그

 

- 사용자 입력을 위한 요소로 사용자로부터 정보를 수집하는 역할

 

 

 

 

 

<form>태그를 묶는 그룹 태그 <fieldset>

-로그인 영역 회원가입 영역 등 폼태그를 그룹으로 묶는 역할

(그러나 fieldset을 자주 쓰기보다는 div로 대체해버린다.)

-웹표준을 위해서 써야한다는 사람도 있고, 아닌사람도 있어서 개인선택?

 

 

- <legend> : 그룹 제목 라벨. <fieldset> 요소에 포함되는 첫 자식 요소. 한번만 사용 가능, 테두리 선 중간에 표시

- fieldset를 쓰면 선이 100%로 되기때문에, 상황에 따라 fieldset {border: none;} 해주기도 한다.

 

 

 

 

 

 

 

2. <input> 태그

- form 태그안에서 사용하는 input 태그

 

 

 

input 태그의 속성

속성값	설명
type	태그 모양을 다양하게 변경할 수 있습니다.
name	태그의 이름을 지정
value	입력 태그의 초기값, 사용자가 입력한 값
readonly	읽기 전용으로 합니다. (수정할 수 없이 볼수만 있음)
maxlength	최대 글자수를 지정합니다.
required	반드시 입력해야하는 태그를 지정할 수 있습니다. 입력하지 않았을 시 에러메세지가 출력됩니다.
autofocus	페이지가 로딩되자마자 자동으로 지정된 포커스로 이동합니다.
placeholder	입력할 값에 대한 힌트를 줍니다. (예 : 아이디를 입력하시오.)

 

 

input type별 스타일 적용!

- input 셀렉터로 스타일을 주면 텍스트 박스, 버튼, 라디오 버튼 등 모든 input 태그에 적용된다.

- 좀 더 구체적으로 셀렉터를 input[type=타입] 으로 쓰면 선택적으로 적용가능

input[type=타입] {
 스타일 내용
}

 

 

 

 

 

 

type의  종류

 

text

대부분 텍스트를 넣을때 기본적으로 사용하는 타입

 

 

 

 

password

로그인화면에서 패스워드를 입력 할때 사용

 

 

 

 

radio

보통 다수의 선택에서 하나만 선택을 할 때 사용하는 타입

 

 

 

 

checkbox

다수의 선택을 가능하게 하고자 할때 사용하는 타입

name은 동일하게

 

 

 

 

 

file

파일을 첨부할때 사용하는 타입

 

accept속성은 해당 확장자로만 파일을 선택할 수 있게 합니다.

- audio/* 은 모든 오디오 파일을 보여줍니다.

- video/* 은 모든 비디오 파일을 보여줍니다.

- image/* 은 모든 이미지 파일을 보여줍니다.

 

 

 

 

 

submit & reset

submit은 form의 데이터를 전송하는 버튼이 생성됩니다.

reset은 폼안의 데이터를 초기화 시켜줍니다.

 

 

 

 

 

email

이메일 적는 요소

section option값을 같이 사용한다.

 

 

 

 

 

 

 

3. label

: 입력 창의 설명

 

- 보통 input과 연결해서 같이 쓰이며, 연결을 원할경우 input에 반드시 id속성이 있어야 한다.

- 또한 label의 텍스트를 클릭해도 input과 연결되어 텍스트창이나 체크박스 등이 선택된다.

 

<label for ="input 연결"> text를 입력해주세요 </label>

<input type="text" id="input연결">

 

//label의 for과 input의 id 값은 똑같아야 한다.

 

예시

 

 

 

 

 

4. textarea 텍스트박스

: 여러 줄의 텍스트를 입력할 수 있는 폼 요소

 

- rows : 아래줄의 수

- cols : 옆의 칸 수

- 만약 텍스트내용이 텍스트박스보다 더 크면 자동으로 스크롤바가 생성

※ rows와 cols를 정해 놓았기 때문에 자동으로 줄바꿈되고 자동스크롤바 생김

 

 

 

** 크롬에서 textarea 크기 조정 없애기 : CSS에 resize: none; 처리

textarea { resize: none; }

 

 

 

 

 

fieldset { border: none; }

table,th,td { border-collapse: collapse; }

input, a, img, span, label, select { vertical-align: middle; }