The Web Developer 부트캠프 2022
table form label button
거위발바닥
2022. 9. 9. 13:26
테이블
td는 테이블의 데이터 ( 모든 요소 )\
tr은 table row ( 가로 )
th table header
theader는 시멘틱 요소 header section 나눔
tbody 도 body section 나눔
rowspan ="#" 은 행을 #개로 span함
colspan ="#" 은 열을 #개로 span함
<table>
<tr>
<th>Animal</th>
<th>Average mass</th>
<th>Maximum mass</th>
<th>Flighted</th>
</tr>
<tr>
<td>Ostrich</td>
<td>104(230)</td>
<td>156.8 (346)</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90 (200)</td>
<td>130 (287)</td>
<td>No</td>
</tr>
</table>
Animal Average mass Maximum mass Flighted
| Ostrich | 104(230) | 156.8 (346) | No |
| Somali Ostrich | 90 (200) | 130 (287) | No |
<table>
<thead>
<tr>
<th rowspan="2">Animal</th> KG, Found가 옆으로 튀어나와서 자리차지하면 안되니까 행이 2개 필요함
<th colspan="2">Average Mass</th> Average Mass 아래에 KG , Found 를 넣고 싶으니 열이 2개 필요함
<th rowspan="2">Flighted</th>
</tr>
<tr>
<th>KG</th>
<th>Found</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ostrich</td>
<td>104(230)</td>
<td>230</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90 (200)</td>
<td>200</td>
<td>No</td>
</tr>
</tbody>
</table>
<form> 은 그룹화된 모든 입력을 받는 상자
<form action=""></form> 여기서 action은 검색한 폼의 내용을 action을 통해 어디로 가는지 제어
<input> 여러가지 기능을 넣음
<input type="text" name="" id="" placeholder="username">
text 타입의 박스를 넣는다 placeholder는 박스가 빈칸일때 들어갈 내용을 적는다.
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
developer.mozilla.org
label은 텍스트의 아이디를 지정하면 그 텍스트 앞에 사족을 붙혀준다.
<label for="username">Enter a Username:</label>
<input type="text" name="username" id="username" placeholder="username">
for = id(username)
input의 id = username 일치하기 때문에
Enter a Username: inputbox
이런 형식의 inputbox가 나타난다.
폼 안에 버튼이 있으면 버튼을 누를때 버튼이 그 폼을 제출한다 .
<form action="/tacos">
<button>YEAH!</button>
</form>
YEAH! 라는 버튼을 누르면 action /tacos 때문에 /tacos로 이동한다.
<button type="button">Submit</button>
버튼의 기본 type 는 summit 이기때문인데, 위처럼 type를 button을 누르면 그냥 버튼이 된다.
또한 input 의 name이 username이면 Submit 을 눌렀을때
file:///C:/tacos?username=입력값 으로 간다.
<form action="/birds">
<input type="checkbox" name="agree.tos" id="agree" checked="true">
<label for="agree">I agree to everything</label>
<button>Submit</button>
</form>
type = checkbox 이름은 agree.tos id도 agree 새로고침시 체크되어있는지 여부 true
label id는 agree submit 버튼을 누를시 form의 액션인 /birds로 들어가는데 체크박스가 true 일시
/birds?agree.tos=on로 가며 false일시 /birds?agree.tos로 간다.
<p>
<label for="XS">XS:</label>
<input type="radio" name="size" id="XS" value="xs">
<label for="s">S</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M</label>
<input type="radio" name="size" id="m" value="m">
</p>
input radio는 여러개의 버튼중 하나만 누를 수 있게 해주는 버튼이다.
여러개의 버튼을 p로 묶었기 때문에 하나의 그룹으로 하려는데 의도인데, 그것을 위해 모든 input name을 같게 해준다.
label을 위해 id 값을 넣어주고 radio에 value 값을 넣지 않고 submit을 한다면 그저 size=on 이 되버려 쓸모가 없으므로
사용자에게 보이지 않는 value값 모두 다르게 넣어 XS 를 선택하면 xs=on S면 s=on 이 되게 해준다.
<p>
<label for="meal">Please Select an Entree</label>
<select name="meal" id="meal">
<option value="fish">Fish</option>
<option value="veg">Vegetarian</option>
<option value="steak">Steak</option>
</select>
</p>
select name으로 그룹값을 지정하고 label을 삽입한 다음 option 을 넣어서 만든다.
ㅇ