HTML - 5 [Form tag and Semantic tag]

위 태그들 + a 들은 모두 form tag에 관한 tag들이다.

 

먼저 form을 만드는 것은 여러가지들을 이form 태그안에다 추가하는 것이다.

 

<input /> : 입력창

위와 같이 간단히 input창이 생겼다.

mdn에서 input을 검색해서 attributes들을 검색하면

간단하게 색을 선택 할 수 있는 입력창을 만들었다.

이러한 정보를 이용해서 새로운 Form을 만들어보자.

<label for="id">라벨내용<label/>

<input id ="id" />

- id가 연결된다.

- 하나의 element당 하나의 id가 규칙이다. (즉, 하나의 태그당 하나의 id를 가져야 한다.)

- CSS에서도  이id는 활용되는데 HTML 코드내에 있는 element의 id를 이용하여

해당 element에게 근육을 붙인다. '이 id를 가진 버튼은 노란색으로 만들어야한다.' 가 CSS 의 역할인 것이다.

 

<input disabled /> 

- 해당 입력창은 사용할 수 없다.

 

input type

- text : 일반적인 입력창

(공통 : required : 입력창을 잘 입력했는지 검사 , minlength="10" : 최소 10글자 이상 적었는지 검사)

- file : 파일선택가능한창 ( accept = "image/*, .pdf") 이미지와 pdf파일만 선택가능하게 함

- password : 비밀번호 입력창 같이 뜨는 창

- submit : input창에 입력된 것을 다른 url이나 서버로 제출하는 버튼

 

Action

- action은 어떤페이지로 데이터를 넘길지 정할 수 있다.

- action을 취하면 해당 사이트로 이동하게 된다.

- submit 버튼을 누르면 값이 action 에 저장해 놓은 사이트로 이동하여 페이지가 변경된다.

 

위 경우에서 form은 friends.html이라는 사이트로 데이터를 넘긴다.

method

- 데이터를 넘기는 방식을 말한다. POST, GET 두가지 방법이 있는데

- POST : 백엔드 서버로 데이터를 넘기는 방식이다. (중요한 보안이 있는 것을 넘겨야한다.)

- GET : 보안에 취약하지만 간단한 전송방식이다. URL과 함께보내도 상관 없는 정보들을 보내는 것.

 

Semantic tag

: 보기만해도 어떤 기능을 가질 태그일지 아는 것 (semantic 이라는 말 자체가 보기만 해도 내용을 아는 이라는 뜻)

- <div></div>

- <header></header>

-<main></main>

- <footer></footer>등등.

모두 같은 기능을 하지만 코드를 볼때 구분지어서 가독성을 훨씬 높이는 방법이다.

이렇게 Semantic tag를 이용해서 코드들 짜야한다.

둘다 같은결과물이지만 코드의 가독성차이는 크다.

 

 

 

이러한 수많은 태그들 기억못한다고 해도 괜찮다.

1. 태그를 작성하는 방법

2. attributes를 찾는 방법

3. attirbutes를 어떻게 사용하는지

를 알수 있으면 아무 상관없다.

 

기본적인 html 형식

<tagname attributes="attributes">content</tagname>

attributes 값이 많을 때

* attributes 값이 True or False일 경우는 그냥 넣어줘도 무방(예: required)