입력 양식 태그
▶ 입력 양식 개요
- form 태그로 영역을 생성하고, form 태그 내부에 input 태그를 넣음. 데이터 입력 후 submit 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달
<input>
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
<output>
| 속성 | 내용 |
| method <form method="get|post"> |
입력 양식에 입력한 데이터를 전달하는 방식, 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시 |
| action <form action="URL"> |
입력 양식에 입력한 데이터를 전달하는 장소, 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시 |
- 전송 방식으로 GET , POST 방식 사용
> GET 방식 : 주소에 데이터를 입력해서 전달, 크기가 한정됨
> POST 방식 : 주소를 변경하지 않고 비밀스럽게 데이터를 전달, 용량 제한X
** GET 방식은 문자열만 표현 가능하며 한 줄로 작성 + url로 표현되어 비교적 노출이 쉬움
▶ 입력 양식 종류
| 태그 | 속성 <~ type=" " ~> | 설명 |
| form | 입력 양식의 시작과 끝 표시 | |
| input | text | 글자 입력 양식 생성 |
| button | 버튼 생성 | |
| radio | 라디오 버튼 생성 (다중 선택) | |
| checkbox | 체크박스 생성 (단일 선택) | |
| file | 파일 입력 양식 생성 | |
| hidden | 해당 내용 표시 안함 (데이터만 넣는 용도) | |
| image | 이미지 형태 생성 | |
| password | 비밀번호 입력 양식 생성 |
| input | reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 | |
| textarea | cols/rows | 여러 행의 글자 입력 양식 생성 (화면의 크기), cols : 너비 지정 rows : 높이 지정 |
| select | 선택 양식 생성 | |
| optgroup | 옵션 그룹화 | |
| option | 옵션 생성 | |
| fieldset | 입력 양식의 그룹 지정 | |
| legend | 입력 양식 그룹의 이름 지정 |
+ number, email, date, time, color, ...
** checkbox, radio 는 체크하지 않으면 해당 데이터가 없으므로 추출 안됨 !!
<!-- 체크 전 -->
?text=text&password=password&file=&hidden=hidden&submit=submit
<!-- 체크 후 -->
?text=text&password=password&file=&checkbox=checkbox&radio=radio&hidden=hidden&submit=submit
<form_basic.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<!-- 사용자가 입력하는 입력 양식 -->
<input type="text" name="text" value="text" /><br />
<input type="password" name="password" value="password" /><br />
<input type="file" name="file" value="file" /><br />
<input type="checkbox" name="checkbox" value="checkbox" /><br />
<input type="radio" name="radio" value="radio" /><br />
<!-- 보이지 않는 입력 양식 -->
<input type="hidden" name="hidden" value="hidden" />
<br />
<!-- 버튼 -->
<input type="button" name="button" value="button" /><br />
<input type="reset" name="reset" value="reset" /><br />
<input type="submit" name="submit" value="submit" /><br />
<input type="image" src="http://placehold.co/100x100" />
</form>
</body>
</html>
<출력 화면>
▶ label 태그
- 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용
- label 태그의 for 속성에 input 태그의 id 속성을 입력해 input 태그를 설명
- for 속성을 연결하면, label 태그를 클릭했을 때 input 태그에 포커스가 감
[ o 남성 ] <- 이 경우 label태그를 해야 '남성' 글자 클릭 시에도 라디오 버튼 체크가 가능 !!
label 태그 안할 시 글자 클릭 불가
**<label> 요소를 사용할 수 있는 요소는 다음과 같다
- <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>
<form>
<label for="name">이름</label>
<input id="name" type="text">
... (생략) ...
</form>
▶ 라디오 버튼
<input type="radio" name="그룹명" value="값">
- 여러 대상 중 하나만 선택하는 형태
- name 속성으로 선택 대산 그룹 지정
- 여러 개의 버튼 구성 시 그룹명이 동일해야 함
<form_basic2.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="m" />
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" value="w" />
<label for="woman">여자</label>
</td>
</tr>
</table>
<input type="submit" value="가입" />
</form>
</body>
</html>
<출력 화면>
▶ select
- 목록의 항목 중 하나 또는 여러 개를 선택할 때 사용, 단일 선택이 default 값
- option 하위 태그 : select 태그 내부에 넣으면 옵션 선택 요소가 생성됨
** select - option 관계 ≒ ul / ol - li
1) 단일 선택 코드
** option 태그에 value 속성을 지정하지 않으면 레이블이 value가 됨
<form_select.html>
<body>
<select>
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
<출력 화면>
2) 다중 선택 코드
<form_selectMultiple.html>
<body>
<select name="test" multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
<input type="submit" />
</body>
<출력 화면>
HTTP 프로토콜에서 클라이언트가 서버로 데이터를 전송할 때, 텍스트 형식으로 데이터를 표현하는 두 가지 주요 방법 1. Form Encoding (application/x-www-form-urlencoded)
클라이언트에서 HTTP 프로토콜을 사용하여 데이터를 전송할 때, Form Encoding은 전통적인 방식이며 JSON Encoding은 현대적인 API 통신에 더 적합 서버에서는 각 인코딩 방식에 맞는 파싱 라이브러리를 사용하여 데이터를 처리 |
3) 카테고리별 그룹핑 - option으로 레이블 지정
<form_selectGroup.html>
<body>
<select>
<optgroup label="HTML5">
<option>Mutimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
<출력 화면>
▶ fieldset
- 입력 양식을 그룹으로 묶고 이름을 지정해서 타이틀 출력
- <legend> 하위 태그로 이름 지정
<form_fieldset.html>
<body>
<form>
<fieldset>
<legend>입력 양식</legend>
<table>
<tr>
<td><label for="name">이름</label></td>
<td><input type="text" id="name"></td>
</tr>
<td><label for="mail">이메일</label></td>
<td><input type="email" id="mail"></td>
</tr>
</table>
<input type="submit">
</fieldset>
</form>
</body>
<출력 화면>
▶ textarea
- 여러 줄을 입력 받는 요소
- 주의 !! 화이트 스페이스(엔터, 탭, 스페이스)가 그대로 출력됨
1) placeholder
> 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 힌트, 실제값x
> 입력 예시 : <input placeholder="내용을 입력해주세요.">
2) required
> 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시
> 제출 버튼 클릭 시 정보 누락 알림창 뜸
> 입력 예시 : <input required>
3) disabled
> 해당 <input> 요소가 비활성화됨을 명시
> 불리언(boolean) 속성으로, 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됨
> 주로 submit 버튼에 포함되며 required이 붙은 곳의 모든 정보가 입력되면 submit 버튼이 활성화됨, 이것을 disabled property로 조정 !!
> 입력 예시 : <input disabled>
4) checked
> 라디오 버튼, 체크박스에 넣어 초기에 체크되어 있게끔 하는 property (불리언 속성)
> 입력 예시 : <input type="checkbox|radio" checked>
▶ 공간 분할 태그
- 영역(범위) 지정을 위한 태그
- 어떻게 보여줄지는 CSS로 결정
| 태그 | 설명 |
| div | - 블록 형식으로 공간 분할 - 전체 행 - (아래로) 수직으로 쌓임 - 조정 가능 - 줄이 바뀌면 div 부모 영역의 width = 해당 div의 width |
| span | - 인라인 형식으로 공간 분할 - 컨텐츠의 크기 - (오른쪽으로) 옆으로 쌓임 - 조정 불가, width는 contents에 의해 결정 |
1. 블록 형식 태그
- 한 행을 모두 차지하며 끝 태그 이후 줄바꿈
- 종류(default며 css에서 inline 형식으로 변경 가능) : div, h1 ~ h6, p, 목록, 테이블 태그
2. 인라인 형식 태그
- 자신의 내용 만큼만 영역을 차지. 끝 태그 이후 줄바꿈하지 않고 다음 내용이 출력
- 종류 (default며 css에서 inline 형식으로 변경 가능) : span, a, input, 글자 형식, 입력 양식 태그
3. 인라인 - 블록 형식 태그
- 기본적으로 인라인 형식(줄바꿈x)이며, 블록 형식과 같이 width와 height 조정 가능
- 종류 : img 태그
<space_blockandinline.html>
<body>
<div>div태그 - block형식</div>
<div>div태그 - block형식</div>
<div>div태그 - block형식</div>
<div>div태그 - block형식</div>
<div>div태그 - block형식</div>
<span>span태그 - inline형식</span>
<span>span태그 - inline형식</span>
<span>span태그 - inline형식</span>
<span>span태그 - inline형식</span>
<span>span태그 - inline형식</span>
</body>
<출력 화면>
▶ 시맨틱 태그
- 시맨틱(sementic) 웹 : 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹
- 시맨틱 태그 : 웹 페이지의 태그에 의미를 부여하는 태그
- 검색 최적화를 위해 div에 이름을 다는 것이다~
| 태그 | 설명 |
| ① header | 머리말(페이지 제목, 페이지 소개) |
| ② nav | 하이퍼링크들을 모아 둔 내비게이션 |
| ③ aside | 본문 흐름에 벗어나는 노트나 팁 |
| ④ section | 문서의 장이나 절에 해당하는 내용 |
| ⑤ article | 본문과 독립적인 콘텐츠 영역 |
| ⑥ footer | 꼬리말(저자나 저작권 정보) |
<a href="https://www.flaticon.com/kr/free-icons/html-5" title="html 5 아이콘">Html 5 아이콘 제작자: Freepik - Flaticon</a>
'Front-end > HTML' 카테고리의 다른 글
| [HTML] 03 HTML5 기본 태그 (0) | 2025.03.08 |
|---|---|
| [HTML] 02 웹 페이지 기본 구조와 작성 방법 (2) | 2025.03.08 |
| CSS3 실습 5-5 (0) | 2022.12.09 |
댓글