1.테이블
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<table>
<caption>Specification values</caption>
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th colspan="2">Strength.</th>
<th rowspan="2">Percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>lb/in</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45</td>
<td>56.2</td>
<td>80,000</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45</td>
<td>49.2</td>
<td>70,000</td>
<td>25</td>
</tr>
<tr>
<td>Soft</td>
<td>0.45</td>
<td>42.2</td>
<td>60,000</td>
<td>30</td>
</tr>
</tbody>
</table>-colspan : 가로셀 합치기
-rowspan : 세로셀 합치기
2.input요소
<input type="text" placeholder="ㅇㅇㅇ">
<input type="password">
<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동
<input type="file">
<form action="./test.html">
메시지: <input type="text" name="message"><br>
<input type="submit">
<input type="reset">
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">
</form>-radio는 name태그가 같아야 서로 상호작용 가능
-checkbox도 name으로 묶어줘야 함. 그래야 값을 받아올 수 있음
-submit은 제출, reset은 초기화
-button 타입은 custom해줘야 함 value로 이름 변경 가능
-image 타입은 이미지 버튼임. alt, src 필수
3.select
<select>
<option>서울</option>
<option>경기</option>
<option selected>강원</option>
...
</select>
<textarea rows="5" cols="30" placeholder="안녕">
...
</textarea>
<button type="submit|reset|button">ㅇㅇㅇ</button>-option에 selected 타입을 주면 처음에 선택되어 있음
-input type=button이랑 button태그랑은 다름
4.else form
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
<form action="" method="">
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
</form>-fieldset으로 구조화 해줌. 묶어준다고 생각하면 됨
-legend는 구조화한것의 제목 설정
-Form 태그는 action에는 데이터 처리 주소 / method는 get이나 post처럼 어떻게 보낼건지?
5.전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>기본 정보</legend>
<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
<option selected>제주</option>
</select><br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
<button type="submit">전송</button>
<button type="reset">취소</button>
</fieldset>
</form>
</body>
</html>'일상 > HTML5, CSS3' 카테고리의 다른 글
| Boostcourse[웹UI] 4.CSS이해하기 (0) | 2021.01.12 |
|---|---|
| Boostcourse[웹UI] 3.콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2021.01.12 |
| 2.Styling Page Sections (0) | 2017.10.01 |
| 1. Css for Styling (0) | 2017.10.01 |
| 2.Basic HTML (0) | 2017.09.30 |