섹션5

html 표

<table>

행과 열이 있는 표. 헤더도 있다.

테이블 형식에 적합한 정보를 보여주는데 사용해야 한다.

<td>

데이터를 포함하는 표의 셀

<tr>

표의 행. table row

행 = 가로 = row

열 = 세로 = column

<th>

표의 헤더.

<thead>

시맨틱 마크업. 헤더를 넣음

<tfoot>

시맨틱 마크업. 마지막. 각주.

<tbody>

시맨틱 마크업. 본문

html form 폼

form elements

폼 요소는 텍스트 입력란이나 비밀번호 입력란 버튼 및 체크 박스 등

여러 개별 폼 컨트롤을 품는 컨테이너에 가깝다.

폼 컨트롤을 폼으로 묶는다.

form

그룹화된 입력을 담는 상자

폼을 제출했을때 데이터를 어디에 보낼지 지시한다.

<form action=””></form>

action이라는 속성이 중요하다. 폼이 제출되었을때 데이터를 보낼 위치와 시간을 정한다.

폼 자체가 컨테이너. 폼을 제출하면 http 요청이 전송된다.

method 속성으로 어떤 http 메서드를 사용할지 정한다.

<input>

20가지 넘는 타입으로 다양하게 활용가능

type 속성으로 정한다. 작동방식을

닫는 태그가 없음.

type=”text” 면 텍스트 상자

type=”password” 면 비밀번호 입력란.

type=”color” 면 색상 선택기.

placeholder=”” 는 입력안했을때 자동으로 써있는 임시텍스트.

<label>

텍스트 같지만 기능 추가

특정한 입력값이나 form control 및 텍스트와 직접적으로 연결되어 있다.

체크박스와 연결하면 레이블 자체를 클릭할수 있게 해줌

for 속성으로 가리키는 곳과 연결.

받는 쪽은 <input id=”$$”> 처럼 for로 가리키는 곳을 Id로 받음

for → id

<label>안에 인풋을 넣으면 for와 id는 필요 없다 </label>

<button>

버튼이 form 안에 있을때는 기본적으로 form을 제출하는 기능.

form밖에서는 따로 지정하지 않으면 그냥 기능 없는 버튼.

type=”button”이라고 속성을 주면 제출하지 않는 버튼.

<input type=”submit”> 은 닫는 태그가 없는 서브밋 버튼이다.

제출을 하면 form action 측으로 http 요청을 보낸다.

reddit 사이트에 dog로 검색하면 /search로 보내고 q=dog로 입력된다.

input태그의 name=“q”이기 때문.

‘name에 입력한 값=form에 입력한 값’ 이렇게 전송됨.

버튼이 없어도 엔터를 누르면 폼 자체가 제출된다.

<input type=”checkbox”>

체크박스

<input type=”radio”>

하나만 선택할수 있는 버튼

name=”” 속성을 같은걸로 주면 그 그룹에서 하나만 선택가능함.

value=”” 속성에 넣은 값이 폼이 제출되면 전송된다.

<select>

드롭다운 메뉴. 셀렉트 태그 안에 <option>태그가 그룹으로 들어간다.

<option value=””></option>

value에 넣은 값이 전송된다.

<input type=”range”>

정도를 선택할수 있는 바. 최소값과 최대값을 설정가능.

step=”” 속성을 입력하면 한번에 step값 만큼만 조정된다

<textarea>

텍스트 입력창.

rows=”” column=”” 위아래 크기와 좌우 너비를 설정.

폼 유효성 검사

html5

<input> 태그에 required 속성을 넣으면 값을 넣어야만 제출할수 있다.

minlength=”” 속성과 maxlength=”” 속성으로 최소 길이 최대길이 설정가능.

<input type=”email”> 로 하면 @가 들어간 이메일 형식인지 알아서 검사함.

<input type=”url”>이면 주소 형식인지 검사함.