HTML_form,input,label 태그

폼 태그

 

-  웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
-  사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용

 

문법 

<form action = '서버에게 전달할 위치' method ='전송방법'>

 

전송방법

get : url에 데이터를 포함하여 전달
post : body 에 데이터를 포함하여 전달

input 태그

-입력 상자 생성

 

사용 속성

type 속성

●text : 문자를 입력받는 글상자
●password : 비밀번호를 입력받는 글상자
●radio : 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼

✔그룹을 맺기 위해 name 속성의 값을 동일하게 해야함 (name을 동일하게 하면 그룹이 맺어진다.)

 

사용속성

●name : 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용

(입력받은 값이 서버에 가면 name값으로 인식되어진다.)

●id: 요소의 유일한 이름을 설정. HTML 문서에서 해당요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용

(HTML 문서내에서 다른 요소와 같은 id를 가질 수 없음)

●placeholder:입력 전 특정 데이터를 입력하도록 안내하는 값을 설정

●value : 서버로 전달할 입력양식의 값을 설정

●checked : 라디오 또는 체크박스 중에서 미리 선택하는 값을 설정

 

●readonly : 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)

 

●disabled : 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달 되지 않음)

 

 

라벨 태그

- 폼 양식에 이름을 붙이는 요소
- 다른 요소를 연결하면 해당 영역이 넓어짐   (텍스트만 클릭해도 radio 여역으로)
- radio,checkbox의 스타일을 설정시 많이 사용

 

문법

<label for ="요소의 id" > 텍스트 또는 이미지 </label>

 

 

3개의 태그를 사용하여 만든 예시

 

 

결과물