모스카토

[html] form 태그 본문

프런트엔드

[html] form 태그

라리라밤 2020. 8. 21. 21:43

<head>

:화면에 보이지 않는 내용, 브라우저

 

①<title></title>

②<meta charset="utf-8"> : 브라우저가 내용을 인코딩할 언어

③<meta content="~~~" name="description"> : 검색엔진이 찾는 태그

④<link rel="" href=""> : 탭에 표시될 로고 등 사진

 

<input>

type = "color" 를 주면 첫번째 박스처럼 색상표가 나오고, 

type = "text" 를 주면 평범한 텍스트를 입력할 수 있는 박스가 생기고,

type="password" 를 주면 입력한 값이 *로 표시된다.

type="submit" 을 주면 form 태그의 action에 있는 주소로 값을 전송할 수 있다.

type="file" 을 주면 위 그림과 같이 로컬 컴퓨터에 있는 파일을 선택할 수 있다.

type="checkbox" 는 체크할 수 있는 선택지를 만들 수 있다.

type = "button" 을 주면 클릭할 수 있는 버튼이 생긴다.

외에도 많은 type이 있다.

 

각 type마다 가능한 attribute가 있는데

예를들어 file 에서는 accept 라는 어트리뷰트가 있다.

위 코드에서 "image/*,.pdf" 는 이미지 파일은 모두 가능하고, pdf도 허용한다는 의미이다.

또 placeholder 라는 어트리뷰트는 네모박스에 값을 입력 받기 전에 나타나는 글자를 지정할 수 있는 속성이다.

 

 

form : 사용자의 입력을 데이터로 가져올 때 사용

사용자가 form에 값을 입력하고 요청(request)하면 데이터가 서버로 전송된다.

form 태그는 나중에 입력받은 값을 데이터베이스나 쿠키, 세션등 백엔드와 연결할 때 중요하다.

요청 방법 2가지

① get : url에 키1 = 값1 & 키2=값2 형식으로 데이터를 전송.

② post : request body에 담아 데이터 전송.

사용방법

<form method = "get"> </form>

<form method = "post"> </form>

전송할 주소 지정 방법

action 어트리뷰트에 전송할 주소를 입력한다.

<form method="get" action = " url주소 "> </form>

form 안에 사용하는 태그 종류

① <input>

input 태그는 type 어트리뷰트를 뭐로 주느냐에 따라 다양한 형태로 화면에 나타날 수 있다.

form 태그와 input 태그
위 코드로 생성된 페이지

색상표에서 색깔을 선택할 수도 있고, 파일을 업로드할 수도 있고, 날짜를 선택하거나 여러 선택지를 만들 수도 있다.

② <select>

select 태그는 option태그를 통해 

select 태그, option 태그
위 코드의 결과

 

③ <fieldset>

④ <label> 

 

'프런트엔드' 카테고리의 다른 글

[css] flex  (0) 2020.09.03
[css ] block v.s inline  (0) 2020.09.02
CSS 시작  (0) 2020.09.01
[html ] 태그  (0) 2020.08.21
html css 시작  (0) 2020.08.19
'프런트엔드' Related Articles more
Comments