이번에는 사용자 입력 Form 태그& Input 태그에 대해서 알아볼게요!
HTML만으로는 사용자로부터 입력받아 서버에 저장할 수 없어서 나중에 백엔드와 함께 다루어 보도록 하겠습니다!
1. <input>
-type: button, text, password, checkbox, radio, date, color, range, file등이 있어요!
1) 버튼, type="button"
-버튼을 생성해서 특정기능을 수행 시킬 때 사용해요!
<input type="button" value="버튼"/>
2)텍스트, type="text"
-텍스트를 입력받는 폼을 생성해서 사용자로부터 텍스트값을 입력받아, 전달하는 기능을 해요! 예를 들어서 Id입력부분같은거겠죠?
3)패스워드. type="password"
-입력값을 자동으로 안보이게 처리해주는게 2)텍스트와의 차이점이에요!
4)체크박스, type="checkbox"
-여러 선택지 중 여러개를 선택 가능한 체크 박스를 생성
-속성: name(체크박스의 이름, 같은 분류의 체크박스는 같은 이름으로 설정⭐),value(체크 박스가 실제로 전달하는 값을 지정), checked(화면 최초 로딩 시에 선택된 상태로 로딩, 처음부터 선택되어 있는 값으로 생각!!)
5)라디오 버튼, type="radio"
-체크박스와의 차이점은 여러 선택지 중 하나만 선택 가능하다는 것이다!
-name에서 라디오 버튼의 이름, 같은 name을 가지는 라디오 버튼은 하나만 선택이 가능하다!! name값을 같게 설정해주는 것이 중요하다!!
-value와 checked는 체크박스와 동일하다
6)날짜선택, type="date"
-특정 날짜(년/월/일)을 선택
-name:날짜 선택 폼 이름
-type="datetime-local": 시간까지 선택이 가능하다.
7) 선택 메뉴(드롭다운)를 만드는 <select>
-<select>: select폼 생성, name(select 박스의 이름)
-<option>: select폼의 옵션 값 생성(value: 실제적으로 전달되는 값, selected: 최초에 선택된 값으로 설정)
-<optgroup>:option을 그룹화(label:optgroup 이름 설정)
-disabled:옵션은 보이지만 선택을 못하도록 설정
그럼 form태그의 종류를 vscode를 통해서 직접한번 알아볼게용~~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form & Input tag</title>
</head>
<body>
<h1>폼 태그 종류에 대해 알아보자</h1>
<!-- from tag: 사용자로부터 입력받는 요소(input, select, textarea)들을 감싸는 태그
form tag의 attribute로 action, method가 있는데, "서버"와 연결된 내용->추후소개
form 테그는 웹브라우저에 드러나지는 않는 추상적인 태그임(일종의 양식)-->
<form>
<!-- 모든 input의 type에는 "name"attribute를 가질 수 있음."서버"와 연결된 내용->추후소개 -->
Text<input type="text" disabled>
<br>
<!-- 웹접근성(시각 장애인 등)에 용이=>사용자가 편리하게 사용할 수 있다 -->
<label for="email">이메일</label>
<input type="text"id="email"placeholder="sesac@naver.com">
<!-- label tag의 for attribute와 input tag의 id attribute를 맞춰주는 것이 사용자가 편리하게 사용할 수 있다! -->
<br>
<!-- textarea:여러 줄을 입력받는 element(요소)
문의 사항이나 댓글 작성 같은 것을 사용할 떄 textarea를 사용하는데 input과의 차이는 여러줄로 작성이 가능하다는 것이다
cols:한 줄에 가능한 글자 수
rows: 몇 줄 작성 가능한지
placeholder:도움말역학(input에서도 사용가능),사용자가 입력하면 그 글자는 사라짐
마우스로 textarea크기 조절 가능!!-->
<textarea name="" id="" cols="30" rows="10" placeholder="문의사항을 입력해주세요"></textarea>
<br>
<input type="color" name="" id="">
<input type="range" name="" id="">
<input type="file" name="" id="">
<input type="date" name="" id="">
<input type="datetime-local" name="" id="">
<br>
<br>
<h3>당신의 취미는?</h3>
<input type="checkbox" name="Interest" value="badminton" checked>배드민턴
<!-- checked라는 attribute를 넣으면 default로 체크가 된다 -->
<input type="checkbox"name="Interest"value="health">헬스
<input type="checkbox"name="Interest"value="movie">영화보기
<input type="checkbox"name="Interest"value="lying">누워있기
<!-- check box와 radio의 경우 같은 name 속성값을 부여해 카테고리화를 해주어야 함 -->
<!-- checkbox에서
name을 갖게 해주면 카테고리 분류가되어 client에서 서버로 넘어감
value는 어떤 값을 선택했는지 서버로 넘어가게 됨
name과 value는 백엔드에서 중요하다!!-->
<br>
<input type="radio" name="gender" id="f"><label for="genderF">여자</label>
<input type="radio" name="gender" id="m"><label for="genderM">남자</label>
<!-- name을 같게 설정해주어야 여러개 중에 하나만 선택할 수 있게 된다(name을 설정하지 않으면 여러개 설정가능하게 됨(잘못사용))
value를 설정해줘야 user가 어떤 값을 선택했는지 back에서 알 수 있다-->
<br>
<!-- input type으로 버튼을 만들수도 있고 button tag로도 버튼을 만들 수 있다. 둘을 동일하다-->
<!-- 단순한 버튼 -->
<input type="button" value="버튼1">
<button>버튼2</button>
<br>
<!-- 폼을 "제출" 버튼 -->
<input type="submit" value="제출1">
<button>제출2</button>
<!-- 위의 버튼과 제출의 차이는 백에서 자세히 다뤄보자! -->
<br>
<select name="flower" id="">
<optgroup label="red-flower">
<option value="a">장미</option>
<option value="b"selected>동백꽃</option>
<!-- selected를 쓰면 dropbox에서 동백꽃이 선택되어 있다. -->
<option value="c">빨간튤립</option>
</optgroup>
<optgroup label="white-flower">
<option value="a">벚꽃</option>
<option value="b"selected>하얀튤립</option>
<!-- selected를 쓰면 dropbox에서 하얀백꽃이 선택되어 있다. -->
</optgroup>
</optgroup>
</select>
</form>
</body>
</html>폼 태그 종류에 대해 알아보자
다음으로는 <TABLE>에 대해서 알아보도록 할게요!
<table>은 표를 만들 때 사용하는 태그로 먼저 행(row,tr)을 쓰고 행의 자식 요소로 칸(col,td)을 넣어주는 것이 기본입니다!
3행 3열의 표를 만든다면
<table>
<tr>
<td></td>
<td></td>
<td></td>
<tr>
<tr>
<td></td>
<td></td>
<td></td>
<tr>
<tr>
<td></td>
<td></td>
<td></td>
<tr>
</table>이런식으로 만들어 볼 수 있겠죠~~
<table>의 속성에는
-border:테두리 두께
-cellspacing:테두리 간격 사이의 너비
-cellpadding:셀 내부의 간격
-align:테이블 정렬 속성
-width와 height:테이블의 너비와 높이
-bgcolor,bordercolor:테이블 배경색,테두리 색
<td>속성
-colspan:해당 칸이 점유하는 열의 수 지정(가로로 병합)
-rowspan:해당 칸이 점유하는 행의 수 지정(세로로 병합)
table에서 배운 내용을 한번 적용해서 알아보도록 하겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<!-- border, align, bgcolor 빨간색 글씨인 이유?
선을 그린다? = 꾸민다 -> CSS가 하는 것이 바람직
-->
<table border="1" width="150" height="150" align="center" bgcolor="skyblue" bordercolor="red">
<caption>
<h3>My Table</h3>
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<!-- cellspacing, cellpadding -->
<!-- cellspacing: border간격을 조정
cellpadding:셀 내부의 간격 지정 -->
<h1>가격표</h1>
<table border="1" cellspacing="10" cellpadding="15">
<tr>
<!-- th:테이블의 제목칸을 의미(bold체) -->
<th>메뉴</th>
<th>가격</th>
<th>비고</th>
</tr>
<tr>
<td>국물떡볶이</td>
<td>5000</td>
<td>2인 이상 주문 가능</td>
</tr>
<tr>
<td>참치김밥</td>
<td>4000</td>
<td>x</td>
</tr>
<tr>
<td>치즈김밥</td>
<td>4000</td>
<td>간, 허파 있음</td>
</tr>
</table>
<hr>
<h1>가격표 new</h1>
<table border="1" cellspacing="0" cellpadding="15">
<tr>
<!-- th:테이블의 제목칸을 의미(bold체) -->
<th>메뉴</th>
<th>가격</th>
<th>비고</th>
</tr>
<tr>
<td>국물떡볶이</td>
<td>5000</td>
<td>2인 이상 주문 가능</td>
</tr>
<!--
colspan:가로를 합치는 것(열을 병합하는것)
rowspan:세로를 합치는 것(행을 병합하는 것)
헷갈리지 않게 주의!!
-->
<tr>
<td>참치김밥</td>
<td rowspan="2">4000</td>
<!-- 이 행부터2개의 행을 합치겠다 -->
<td>x</td>
</tr>
<tr>
<td>치즈김밥</td>
<!-- 여기에 있던 원래 행이 합쳐진다(원래 td어쩌고를 지워야한다.) -->
<td>신메뉴</td>
</tr>
<tr>
<!-- colspan="3" 3개의 행을 함치겠다! -->
<td colspan="3">순대(품절)</td>
</tr>
</body>
</html>| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
가격표
| 메뉴 | 가격 | 비고 |
|---|---|---|
| 국물떡볶이 | 5000 | 2인 이상 주문 가능 |
| 참치김밥 | 4000 | x |
| 치즈김밥 | 4000 | 간, 허파 있음 |
가격표 new
| 메뉴 | 가격 | 비고 |
|---|---|---|
| 국물떡볶이 | 5000 | 2인 이상 주문 가능 |
| 참치김밥 | 4000 | x |
| 치즈김밥 | 신메뉴 | |
| 순대(품절) | ||
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 (0) | 2023.07.25 |
|---|---|
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(1)-개요, 참조방식 (0) | 2023.07.25 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(2) 회고록 (1) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(1) 회고록 (0) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/17) 회고|OT&GIT사용법 (0) | 2023.07.19 |
