[HTML] HTML 마크업 요소 (Form) - 스압주의

Form Tag란?

 - form이란 정보를 입력/선택하고 버튼을 클릭하며 정보를 서버에 전달하고 응답받는 양방향의 의사소통을 지원하는 입력 양식이다.
   * Web Server : iss, apache 등
   * WAS(Web Server + Web Application) : tomcat, regin, webLogic, Jeus 등 (JSON까지 사용하려면 필요)
 - 사용자의 요청에 따라 서버는 HTML form을 전달한다. (로그인, 검색 등의 양식)
 - 사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송(submit)한다.
 - 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나 원하는 데이터를 조회하여 결과를 다시 반환한다.
   * 결과 출력 : HTML(보통 여기에 출력), json, xml 등에 출력

[HTML 작동원리]

 

---

Form Tag

<form action="" enctype="" method="" target=""> 
 <input type="" name="" value="" size="" maxlength="" src="" checked>
 <select name="" size="" multiple>
 <option value="" selected> 항목
 </select>
</form>​

속성	설명
action="URL"	form의 내용을 처리하기 위한 CGI가 있는 서버 URI을 설정합니다.
enctype=" "	application/x-www-form-urlencoded key=value로 Map형태로 표현 (ex. name=kim&age=20&phone=010-111-1111) multipart/form-data: 첨부파일을 전송할 때 사용합니다.
method="get/post"	클라이언트의 데이터를 서버로 보내기 위한 방법을 설정합니다.
	GET(기본값)  - 폼의 내용을 서버로 전송할 때 255바이트 이하까지만 전송(길이 제한 O)할 수 있고 주소표시줄에 전송되는 값이 노출됩니다.
	POST  - 폼의 내용을 서버로 전송할 때 255바이트보다 크거나(길이 제한 X) http 헤더에 전송되는 값이 숨겨지기 때문에 보안이 필요한 데이터를 서버로 전송할 때 설정합니다.
target="프레임 명"	form의 입력 데이터의 처리된 결과를 표시할 프레임을 지정한다.
name	form의 이름을 지정한다.
autocomplete	자동완성 기능이다. (기본값 ON)

---

Form Tag의 자식

Tag 명	속성	형태	설명
<form>	- 사용자에게 입력받을 항목을 정의한다.  - form 내부에 여러 개의 control 요소를 포함한다.
<input>	text		텍스트 입력 양식
	password		비밀번호 입력 양식
	button		버튼  * 혼자서는 의미가 없다.  * 스크립스 함수와 연결해서 사용.
	submit		form에서 지정한 페이지로 이동  * 데이터를 서버로 전송
	reset		모든 입력 양식 초기화
	checkbox		체크박스(다중 선택)
	radio		라디오 버튼(단일 선택)  *name속성의 값이 모두 일치해야 함. (속성이 같은 항목 중 단일 선택)
	image	이미지 형태	이미지 형태  * button효과를 볼 수 있지만 submit을 기본으로 가지고 있어서 조심해야 한다.
	file		파일 입력 양식  * file : post, enctype 설정 필수
		<form method="post" action="" enctype="multipart/form-data">     <input type="file" id="picture" name="picture"> </form>
	hidden	보이지 않게 숨긴다.	해당 내용을 표시하지 않음
<textarea>	cols rows		여러 행의 텍스트 cols는 열 개수, rows는 행수  * disabled 속성 : 데이터 수정 비활성화
<select> <optgroup> <option>			선택 양식 옵션의 그룹화 옵션 추가
<fieldset> <legend>			입력 양식의 그룹지정 입력 양식 그룹의 이름
<button>			- submit, reset, button 3개지 type이 있다.  - <input> Tag의 button과의 차이점은 <button> Tag는 contents를 포함할 수 있기 때문에 아이콘을 추가할 수 있고, CSS를 이용하여 원하는 형태로 꾸밀 수 있다.

● input 태그 속성

<input type="유형" [속성="속성값"]>

속성	설명
type="입력 타입"	- text, password, checkbox, radio, submit, reset 등
id="id"	- id 속성은 여러 번 사용된 폼 요소를 구분하기 위해 사용  - id 속성 값은 최소한 한 개 이상의 문자여야 하며 공백은 허용하지 않음  - 같은 html document에서 id는 하나의 값만 가능하고 name은 중복 허용   * ID는 주로 Logic(JS)에 사용, Class는 Design에 사용
name="변수 명"	- 서버에 전송될 양식의 이름 (중복 허용)
value="기본 입력 값"	- 입력 변수의 초깃값
size / minlength / maxlength	- 화면에 보이는 글자의 길이(입력 필드 길이) / 최소 길이 / 최대길이
src="URL"	- 이미지 버튼을 만들 때 이미지의 주소
checked	- 체크박스와 라디오 버튼일 경우 기본 선택 값 설정
autofocus	- 페이지 로딩 후 폼의 요소 중에서 해당 요소에 마우스 커서를 표시  - HTML5 이전에는 JS(자바스크립트)로 구현
placeholder	- 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시  - 클릭 시 자동으로 내용이 사라짐
readonly	- 입력란에 텍스트를 사용자가 직접 입력하지 못하게 읽기 전용으로 지정
required	- form에 data를 입력 후 submit 클릭 시 서버로 data 전송 전 필수 입력 항목 체크  - required / required="required"로 표현
min / max / step	- 최소 / 최대 / 일정 간격 지정
height / width	- 이미지 높이 / 너비
list	- <datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여줌
	* datalist : <input>과 함께 사용하며 텍스트 필드에 직접 값을 입력하는 것이 아니라 datalist의 선택 값이 텍스트 필드에 입력된다. <input type="text" list="datalist id"> <datalist id="datalist id">     <option value="value1" label="label1"></option>     <option value="value2" label="label2"></option>     <option value="value3" label="label3"></option>     <option value="value4" label="label4"></option>     <option value="value5" label="label5"></option> </datalist> <option> 속성   - value : 사용자가 레이블을 선택했을 때 서버로 넘겨질 값 지정   - label : 사용자를 위해 브라우저에 표시할 레이블. 따로 지정하지 않을 경우 value값 사용.
multiple	- "email"이나 "file" 타입일 때 두 개 이상의 값을 입력  - <input> 태그 안에 속성 이름만 표시

● select 태그 속성
 - <select> Tag는 select box(dropdown)를 표시한다.

속성	설명
option	select box에 포함될 항목들을 정의
name="입력 변수 명"	서버에 전송될 양식의 이름을 지정합니다.
size="보일 항목 개수"	<select> 속성으로 드롭 다운 메뉴의 개수(줄 수) 지정합니다.
multiple	<select> 속성으로 다중 선택 메뉴일 경우입니다.  * Ctrl + 클릭으로 선택 가능
value="메뉴 값"	<option> 속성으로 실제 데이터 처리되는 입력 값으로 옵션 선택 시 서버로 넘겨질 값입니다.
selected	<option> 속성으로 기본선택 지정합니다.

---

향상된 Form Tag

속성	형태	설명
date		달력에서 날짜를 선택하거나 스핀 박스에서 시간을 선택  - min : 날짜나 시간의 최솟값 지정  - max : 날짜나 시간의 최댓값 지정  - step : 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지 지정  - value : 화면에 표시할 초기값 지정.     * type="time" : 00:00~23:59까지 입력       type="datetime", type="datetime-local"       : 날짜 다음 T를 쓰고 24시간제로 시간 지정       예) T22:00
month
week
time
datetime-local
name		이름 입력
email		서버로 전송 시 이메일 형식 자동 체크
url		웹 사이트 주소 입력
tel		연락처 입력
number		숫자를 스핀 박스를 이용해서 입력(0~100), 기본값:1 min(최솟값), max(최댓값), step(간격), value(초깃값)
range
progress		작업의 진행 상태를 표시한다.  - value : 작업 진행 상태, 부동 소수점으로 표현(0~max)  - max : 작업 완료 도달 수치, 부동 소수점으로 표현 (0 초과값)
meter		값이 차지하는 크기 표시한다. progress와 출력 형태는 유사하다.   * progress : 작업의 진행상황, meter : 전체 크기 중 얼마나 차지하는지 표현  - min / max : 최소 / 최대 (미설정시 0 / 1)  - value : 범위 내에서 차지하는 값  - low : 낮은 수치의 기준  - high : 높은 수치의 기준  - optimum : 적당한 수치의 기준
color		색상 선택 상자 표시  - 지원 브라우저 : 크롬, 파이어폭스, 오페라, 안드로이드  - 그 외 브라우저는 텍스트 필드로 표시
search		검색어를 입력하면 오른쪽 X로 표시된다.

---

멀티미디어 태그

 - HTML5에서 추가된 멀티미디어 요소인 video와 audio는 브라우저 자체에서 동영상을 재생하도록 지원하는 멀티미디어 태그이다.
● 웹 브라우저에서 오디오/비디오 코덱의 지원 현황

코덱	웹 브라우저
	크롬 (버전6이상)	파이어폭스 (버전3.6이상)	익스플로러 (버전9이상)	사파리 (버전5이상)	오페라 (버전10.6이상)
Mp3	지원	지원	지원	지원	지원
Wave	지원	지원	미지원	지원	지원
Ogg/Theora	지원	지원	미지원	미지원	지원
Mp4(H.264)	지원	지원	지원	지원	지원
WebM	지원	지원	미지원	지원	지원

<audio controls autoplay src="재생할 사운드 파일 이름">
 <source src="" type="">
</audio>
<video controls src="비디오 파일 이름" width="" height="">​​

src : 동영상 파일의 경로를 지정 • controls: 동영상 화면에 컨트롤 기능 추가 • loop: 반복 재생 횟수 지정 • autoplay : 동영상 자동 재생 • width, height : 화면에서 비디오가 표시될 영역의 크기 • poster : 동영상이 화면에 나타나지 않을 때 대신 표시할 그림을 지정 • preload : 동영상이 백그라운드에서 다운로드 되어 재생 단추를 눌렀을 때 재생   -auto(기본값) : 페이지를 로드하고 바로 비디오 파일을 다운로드   -metadata : 사용자가 재생시키기 전 까지는 비디오의 크기, 첫 프레임, 비디오 관련정보 등과 같은 메타 데이터만 다운로드   -none: 재생 시작 전까지 비디오 파일을 다운로드 안 함.

---

소스코드

<form action="" method="get">
    <fieldset>
        <legend>fieldset legend</legend>
        <table border="0">
            <tr>
                <td>Text</td>
                <td><input type="text" name="txt" size="20"></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" name="pwd" size="20"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="button">
                    <input type="submit" value="submit">
                    <input type="reset"	value="reset">
                </td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>
                    <input type="checkbox" name="check" value="checkbox1" checked>checkbox1
                    <input type="checkbox" name="check" value="checkbox2">checkbox2
                    <input type="checkbox" name="check" value="checkbox3">checkbox3
                </td>
            </tr>
            <tr>		
                <td>radio<br>
                <td>	
                    <input type="radio" name="radioo" value="radio1">radio1
                    <input type="radio" name="radioo" value="radio2" checked>radio2
                </td>
            </tr>
            <tr>
                <td><label for="file">파일선택</label></td>
                <td><input type="file" accept="image/jpg, image/gif" id=”file_ID”></td>
            </tr>
            <tr>
                <td>select</td>
                <td>
                <select name="selects" size="3" multiple>
                    <optgroup label = "optgroup1">
                      <option value="select1">select1</option>
                      <option value="select2">select2</option>
                    </optgroup>
                    <optgroup label = "optgroup2">
                      <option value="select3">select3</option>
                      <option value="select4">select4</option>
                    </optgroup>
                </select>
                </td>
            </tr>
            <tr>
                <td>datalist</td>
                <td>
                <input type="text" list="datalist id">
                <datalist id="datalist id">
                    <option value="value1" label="label1"></option>
                    <option value="value2" label="label2"></option>
                    <option value="value3" label="label3"></option>
                    <option value="value4" label="label4"></option>
                    <option value="value5" label="label5"></option>
                </datalist>
                </td>
            </tr>
            <tr>
                <td>textarea</td>		
                <td>
                    <textarea rows="7" cols="30" name="txtarea"></textarea>
                </td>
            </tr>
            <tr>
                <td>날짜</td>
                <td>
                    <input type="date">
                </td>
            </tr>
            <tr>
                <td>월</td>
                <td>
                    <input type="month">
                </td>
            </tr>
            <tr>
                <td>주</td>
                <td>
                    <input type="week">
                </td>
            </tr>
            <tr>
                <td>시간</td>
                <td>
                    <input type="time">
                </td>
            </tr>
            <tr>
                <td>지역시간</td>
                <td>
                    <input type="datetime-local">
                </td>
            </tr>
            <tr>
                <td>이름</td>
                <td>
                    <input type="name" input type="text" name="name" value="이름을 입력하시오"
                    required="required" autofocus="autofocus" id="name">
                </td>
            </tr>
            <tr>
                <td>이메일</td>
                <td>
                    <input type="email" name="mail" placeholder="이메일을 입력하시오"
                    id=”email”>
                </td>
            </tr>
            <tr>
                <td>URL</td>
                <td>
                    <input type="url" name="url"
                    placeholder="URL을 입력하시오" id=”URL_ID”>
                </td>
            </tr>
            <tr>
                <td>전화번호</td>
                <td>
                    <input type="tel" name="tel"
                    pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}" title="###-####-####"
                    placeholder="전화번호를 입력하시오" id="tel_ID">
                </td>
            </tr>
            <tr>
                <td>숫자</td>
                <td>
                    <input type="number" name="number"
                    placeholder="숫자를 입력하시오" id="number">
                </td>
            </tr>
            <tr>
                <td>범위</td>
                <td>
                    <input type="range" name="range" id="range">
                </td>
            </tr>
            <tr>
                <td>progress</td>
                <td>
                    <progress value="30" max="100"></progress>
                </td>
            </tr>
            <tr>
                <td>meter1</td>
                <td>
                    <meter min="0" max="10" value="7" optimum="5"></meter>
                    <meter min="0" max="10" value="2" low="3" high="8"></meter>
                    <meter min="0" max="10" value="9" low="3" high="8"></meter>
                </td>
            </tr>
            <tr>
                <td>색상</td>
                <td>
                    <input type="color" name="color" id="color">
                </td>
            </tr>
            <tr>
                <td>검색</td>
                <td>
                    <input type="search" name="search" id="search">
                </td>
            </tr>
        </table>
    </fieldset>
</form>

---

결과

 * fieldset legent가 정상적으로 적용되어야 하지만 tistory상 오류 발생.. (VS Code로 실행 시 정상 작동)

fieldset legend

Text
Password
checkbox	checkbox1 checkbox2 checkbox3
radio	radio1 radio2
파일선택
select	select1 select2 select3 select4
datalist
textarea
날짜
월
주
시간
지역시간
이름
이메일
URL
전화번호
숫자
범위
progress
meter1
색상
검색

---

HTML에 추가된 Tag

태그	설명
<a>	(download 속성) href 속성에 지정된 파일을 다운로드할 수 있도록 설정 (ping 속성) 링크를 클릭했을 때 정보를 자동으로 송신할 수 있도록 설정
<strong>	아주 중요하거나 심각하거나 긴급을 요하는 내용을 표시
<mark>	특정 텍스트의 강조 효과를 형광펜으로 칠한 것과 같은 효과
<ryby><rt> <rp><rb><rtc>	Ruby 언어를 표시할 때 사용
<bdi>	텍스트의 방향을 격리하여 나타나도록 설정
<wbr>	줄 바꿈 지점을 나타낼 때 사용
<details>	사용자 요청에 따라 얻은 컨트롤이나 추가적인 정보
<summary>	Details 요소의 하위 요소로써 머리글을 나타냄
<menu>	명령들의 목록을 정의하고 명령들의 단축 메뉴 같은 것들을 목록화
<command>	사용자가 호출할 수 있는 명령어를 나타냄
<dialog>	대화를 의미 있는 콘텐츠로 만들고자 할 때 사용하며 대화 상자 또는 창을 나타냄

---

HTML에 삭제된 Tag

HTML5에서 더 이상 사용되지 않는 태그들

태그	설명
<font>	글꼴
<frame>	프레임 나누기
<frameset>	프레임 부속 태그
<noframe>	프레임 부속 태그
<center>	텍스트 위치 중앙 정렬
<basefont>	글꼴의 형태 정의
<big>	글꼴의 크기 지정
<strike>	글꼴 효과
<u>	글꼴 효과
<xmp>	pre 태그와 동일효과
<acronym>	영문 축약형 사용 시 사용
<applet>	임베디드 애플릿 사용
<dir>	디렉토리 리스트

---

HTML List

HTML List

---

  

기회는 준비된 자에게 찾아온다.

 

---