Section 5: HTML: Forms & Tables (1)
2022.05.01 07:35 PM ~ (3-1) 파일로 넘어감
Section 5: HTML: Forms & Tables
＊ 글속 태그들 < >는 ( )로 대체
<< HTML Tables (표) >>
-> 1. 행 (Row) : 옆으로 가는 가로 줄.
-> 2. 열 (Column) : 밑으로 가는 세로 줄.
-> 3. 표 (Table) : 행과 열을 합친 것이 Table※ 요즘 많이 쓰이지 않음.
<< Table 관련 태그들 >>
-> 1. (td>(/td> : Table Data Cell. 표의 한 칸, 한 칸. 단일 셀을 뜻함
-> 2. (tr>(/tr> : Table Row. 옆으로 가는 '행'으로 묶어줌
(tr 태그 안에 각각의 td 태그가 묶임)
-> 3. (th>(/th> : Table Header. 제목 행, 진한 글씨로 표시 됨.
(tr 태그 안에 각각의 th 태그가 묶임)
-> 4. (thead>(/thead> : 위의 th 태그 + 그것의 tr 부모태그를 묶어서
여기가 표의 제목 행이라고 구분 짓는 것
-> 5. (tbody>(/tbody> : 여기부터 여기까지가 표의 내용이라고 tr과 td 태그들을 묶는 것
<< Colspan & Rowspan >>
※ Col열span / Row행span
-> 1. rowspan : th에 들어가는 attribute.
(tr rowspan="2">(/tr> 위 아래 행의 두칸을 합침-> 2. colspan : 칸 나누기. th에 들어가는 attiribute. 옆으로 두칸을 가지도록 함.
(ex: 윗칸 제목 셀은 하나인데 그 밑에 세부 소제목 셀이 두개이도록)
<< Form 태그 >>
-> 1. (form action="">(/form>
(action attribute는 데이터를 어디로 보내야 되는지 지정함)※ 일종의 컨테이너. div처럼 외곽을 꾸미거나 그런 효과는 없다.
안쪽에 input태그, 체크박스, 버튼 등을 채울 수 있다.(ex: 대표적으로는 로그인 창.
Please Sign in
Email adress (인풋 창)
Password (인풋 창)
□Remember me(체크박스)
[ Sign In ] (버튼) )
※ Form 요소는 양식이 제출될 때 양식 데이터를 보내야하는 위치를 지정함.
※ 양식 제출 시, HTTP 요청이 전송되고, 해당 요청의 위치를 제어함.※form 예시 제출 버튼 눌렀을 때 일어나는 일.
(ex: file:///C:/tacos?username=colt&password=wqfwqf&color=%23cc2828&num=663tacos로 전송될 데이터는?
username(username이 name인 input에서 온 value) = colt
password(password가 name인 inputt에서 온 value) = wqfwqf
color(color가 name인 input에서 온 value) = %23cc2828
num(num이 name인 input에서 온 value) = 663 )
<< Input 태그 >>
※ 20개 이상의 제어 가능한 다양한 형태를 만들 수 있다.
(ex: 체크박스, 색상 선택기, 날짜 선택기, 비밀번호 입력 칸 등)-> 1. (input type="다양한 종류 들어감" placeholder="input에 표시될 텍스트" />
(닫는 태그 없음)(ex: (input type="passworld" placeholder="password" />
[ password ]라고 희미하게 써진 패스워드 입력창이 생성됨.
type이 password라서, *으로 표시 됨)
-> 2. "Name" attribute. (input .... name="username" />
(form이 제출됐을 때 해당 input이 전달하는 value를 설명함)※ 데이터가 전송될 때 name 속성을 사용함
<< Label 태그 >>
※ input 태그에 붙어서 input 태그의 제어를 좀 더 쉽고 명확하게 해줌.
※ input 태그에 지정한 각각의 고유의 id에 대응하여 적용됨(ex: 체크박스에 label을 하나 붙여놓으면, 그 글씨를 눌러도 체크가 됨.
Do you like a Cheese? □)-> 1. (label for="input에서 지정한 대상의 id">내용(/label>
<< Button 태그 >>
※ 말그대로 버튼을 만들어 줌.
※ (input type="submit" value="텍스트 내용" />
이렇게 할 수도 있지만 잘 안씀.-> 1. (button type="4종류가 있음">버튼 텍스트 내용(/button>
(form안의 버튼은 누르면 자동 submit(제출)이 됨.
그러나 type="button"이라고 하면
그냥 버튼처럼 실행되고, submit하지 않음)
※ form의 action=""에 제출될 주소를 입력해놨다면,
button에 자바스크립트로 뭘 안해도 그냥 누르면
form의 다른 요소들에 입력된 값들이 최종 제출 됨
<< form의 제출 예제 >>
ex:
<form action="https://www.google.com/search">
<input type="text" name="q" />
<button>Search Google</button>
</form>구글에서 "pizza"를 검색해보면,
https://www.google.com/search?q=pizza 라고 url이 출력됨.
즉, google의 input 검색 창은 "name=q"라고 지정해놓은 것임.
그래서 부모태그인 form에 제출 시 q= 사용자 입력 값 이렇게 넘겨주는 것)
