<Table> 태그 : 표를 만드는 태그
<table> 태그의 내부태그
<th> 내용(표의 제목) </th>
<tr> 내용(가로줄 만듦) </tr>
<td> 내용(셀을 만듦) </td>
<!DOCTYPE html>
<html>
<head>
<title>table test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table border="1">
<tr>
<th>번호</th>
<th>이름</th>
</tr>
<tr>
<td>1</td>
<td>서다원</td>
</tr>
<tr>
<td>2</td>
<td>홍길동</td>
</tr>
</table>
</body>
</html>결과
<table> 의 속성중 colspan : 셀(가로줄) 합치는 개수적기
'이름'을 지우고
<th>번호</th> --> <th colspan="2"> 번호</th>
로 바꾸면
결과
rowspan : 셀(세로줄) 합치는 개수
<!DOCTYPE html>
<html>
<head>
<title>table test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">HUFS</td>
<td>서다원</td>
</tr>
<tr>
<td>홍길동</td>
</tr>
</table>
</body>
</html>결과
border : 테이블 경계선 굵기 (border = "10")
width : 테이블 너비
height : 테이블 높이
<form> 태그 : 입력 양식 전체를 감싸는 태그
form은 컨트롤 요소로 구성된다. 체크박스나 라디오 버튼을 클릭하고 제출버튼을 주르면
백엔드 서버에 form data가 전달되어 정보를 처리하게 된다
속성
name : 이름
action : 전송되는 웹 서버의 url 또는 html 링크
method : 전송방법 설정. get과 post 가 존재함
enctype : form 데이터를 서버로 보낼때 데이터가 인코딩 된 방법 명시 여러가지 존재
<input> 태그
속성 : Type(입력형식), Name(서버로 전송되는 데이터 이름)
속성type에 따라 기능이 달라진다
type = "text"
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<input type="text" name="id" placeholder="아이디" />
</form>
</body>
</html>type = "password"
위와같음
type="button"
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<input type="button" value="전송" onclick="alert('hello world')">
</form>
</body>
</html>type="submit", Type="reset"
양식 제출용 버튼, 양식 초기화용 버튼
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<input type="submit" value="제출" onclick="alert('submit complete')">
</form>
</body>
</html>type = "radio", type="checkbox"
radio는 단일 선택, checkbox는 다중 선택
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<input type="radio" name="color" value="red" /> 빨간색 <br />
<input type="radio" name="color" value="black"/> 검은색
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<input type="checkbox" name="color" value="red" /> red<br />
<input type="checkbox" name="color" value="blue" checked /> blue<br />
<input type="checkbox" name="color" value="black" checked /> black<br />
</form>
</body>
</html><textarea> 태그
여러줄의 텍스트 입력할때 사용
<form>
<p>textarea :
<textarea cols="50" rows="3"
placeholder="default">입력하세요.</textarea>
</p>
</form><select>태그
내부에 option태그를 이용합니다
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<form>
<select name="color">
<option value="서버에 전송될 값">red</option>
<option value="blue">blue</option>
</select>
</form>
</body>
</html>form 태그의 속성중 method에 관하여
form 태그는 입력한 데이터를 전달하거나 읽어들입니다
여기서 데이터 전송과 관련된 방식을 method 라고 합니다
방식은 get 방식과 post 방식 두가지가 존재합니다
GET 방식은 url 끝에 데이터를 첨부해서 전송하는 방식
POST 방식은 패킷의 본문안에 데이터를 넣어서 전송하는 방식
