<html> form태그에 대한 정리

<html> form태그에 대한 정리_복습 3

IT 공부/프론트엔드(Front-end)

by 듀_77 2021. 5. 14. 20:32

웹에서 폼(form)은

'사용자가 웹 사이트로 정보를 보낼 수 있는 요소들'을 의미한다.

HTML로, 이 형식을 구현가능한데

대충 어떤 원리로 돌아가냐면 아래와 같다.

*

[로그인할 때_ flow chart]

1. 사용자가 아이디와 비밀번호 입력

2. [로그인] 버튼 클릭

3. 입력 내용이 서버로 보내짐.

4. 서버는 자신이 지닌 사용자 데이터베이스를 뒤진다.

5. 사용자가 보내온 아이디와 비밀번호가

서로 일치하는 정보인지 여부를 확인하고,

그 결과값을 브라우저에 보냄.

→폼과 관련된 작업: 정보를 저장, 검색, 수정하는 일.

(데이터베이스를 기반)

[프론트엔드와 백엔드 영역]

*폼의 형태를 만드는 것:html

*폼에 입력한 사용자 정보를 처리: ASP, PHP, JSP

(서버 프로그래밍 영역)

EX) 위와 같은 창을 구현하려면?

우선 form태그에는 method라는 속성을 부여 가능하다.

웹 사이트에 입력할

데이터의 전달 방식을 선택하는 것.

→ get방식과 post방식이 있는데

따로 정리할 예정.

아주 간단하게만 얘기한다면!

get: 주소창에 쿼리 스트링이 노출.

보안성 ↓, 전송속도 ↑

post: 주소창에 데이터 노출 x

보안성 ↑, 전송속도 ↓

<input 태그에 걸 수 있는 속성>

1. type: 입력 태그의 유형 설정

ex) "password"인지 "radio" "submit" 인지

실질적으로 생김새를 정해줌

2. value: 입력 태그의 초기값 (사용자가 변경가능한 데이터)

ex) 실제 내용물이 되는 부분

3. name: 서버로 전달되는 이름( 사용자가 임의 지정 )

→ 태그명

서버에서 name명으로 데이터를 불러올 수 있기 때문에

변수처럼 지정해주는 기능.

*

[value 와 name의 차이]

name="" (변수로서, 호출용으로 쓰임)

→ 서버와 통신할때 쓰임

이제 실제 코드를 작성하기 위한 준비는 다 끝났다.

예제를 풀어보자!

*

form태그를 열어서,

1. <input>태그 활용_ id

2. <input>태그 활용_submit(제출 버튼)

이 두개를 만드는 코드를 작성해보았다.

기본적인 코드는 속성을 활용해서

<태그 속성="타입"/>

이게 기본 작성 포맷이라고 보면 된다

*<input>태그 사용시 주의점은 '닫힌 태그'

< /> 형태로 끝내주기!

-실질적으로 id 입력창을 만들어주는 건

type 속성!

-여기에 id라는 이름을 부여해준 건

name 속성!

get방식으로 했을 때 주소창이 달라지는 걸 확인 가능하다.

이외 생김새는 위 post방식과 동일.

이 코드 또한 "text"의 name(변수)명을 "search"로 변경

그리고 method 속성을 "get"으로 변경

해준 것 밖에 없다.

[요약]

1. form 태그의 정의

2. form 태그의 속성 (get/post)

3. get 방식과 post방식의 차이

4. input 태그의 속성:

type, name, value

'IT 공부 > 프론트엔드(Front-end)' 카테고리의 다른 글

[html] form 태그의 속성, <fieldset>,<legend> 태그_정리 (0)	2021.06.02
[html] <input>태그의 type속성 완전 정리!_복습4 (0)	2021.05.14
목록태그(ul/ol/li) 정의 목록 태그(dl,dt,dd) 테이블요소태그(tr,th,td) 정리_복습2 (0)	2021.04.27
비주얼스튜디오코드(Visual studio code) 초기화방법 및 안될 때! (3)	2021.03.30
웹브라우저와 웹 편집기_ DO it HTML+CSS 개념1 (0)	2021.03.28