폼 관련 요소
1. 폼이란?
웹 문서가 서로 상호작용을 할 수 있도록 함. (라디오 버튼, 체크박스, 콤보박스, 버튼 등등)
2. 폼 요소 <form>
폼의 범위를 정의할 때 form 요소를 사용.
속성으로는 폼의 내용을 처리하는 서버의 URI를 지정하기 위한 action과
폼의 내용을 처리하는 방법인 method 가 있음.
<form action=”서버 URI” method=”get 또는 post”>
폼의 내용
</form>
* GET 과 POST 의 전송방식의 차이점
GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적.
POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다.
3. 폼 요소 그룹화 및 제목 <fieldset>, <legend>
여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset 요소를 사용.
fieldset 요소를 이용하면 주위에 border가 생성되어 그룹 안에 있는 컨텐츠가 폼과 관련된 요소임이 쉽게 구별됨.
fieldset의 컨트롤들이 어떤 성격의 컨텐츠인지 legend 요소로 제목형식으로 알려줄 수 있음.
fieldset 요소의 바로 뒤에 한번만 작성할 수 있음.
웹 브라우저 스타일이 다르게 적용되어 있어 css 디자인 작업에는 곤란할 수 있음.
<form action=”서버 URI” method=”post”>
<fieldset>
<legend>폼 요소의 제목</legend>
… 생략 …
</fieldset>
</form>
4. 레이블 <label>
폼을 구조화하고 접근성을 높일 수 있는 요소 중 하나.
각 폼 컨트롤의 연관 관계와 설명을 추가하는 역할을 담당.
웹 접근성을 높이기 위해 모든 폼 컨트롤 등에 label 요소를 사용하도록 권장.
* 최신 웹 브라우저의 경우 레이블만 선택해도 폼 컨트롤을 선택.
* 음성 브라우저의 경우 폼 컨트롤이 레이블과 인접하지 않은 경우에도 인식.
명시적 label (id와 for 속성 연결시키기)
<form action=”member.asp” method=”post”>
<fieldset>
<legend>회윈가입 정보</legend>
<p><label for=”userName”>이름</label>
<input type=”text” id=”userName” name=”name” value=”value” /></p>
</fieldset>
</form>
암묵적 label (label 요소에 폼 컨트롤 포함시키기)
<form action=”member.asp” method=”post”><fieldset>
<legend>회윈가입 정보</legend>
<p><label>이름
<input type=”text” id=”userName” name=”name” value=”value” />
</label></p>
</fieldset>
</form>
5. 다양한 폼 컨트롤 <input>
폼 요소 안에 한 줄 글상자, 라디오 버튼, 체크 박스 등의 폼 컨트롤을 생성할 때는 input 요소를 사용.
type 속성값에 따라 폼의 종류가 결정. (type=”컨트롤값”)
- text : 한 줄 글상자. 이름, id 등의 컨트롤을 생성할 때 사용.
- password : 비밀번호 입력 상자. 입력값이 * 로 표시.
- radio : 여러 개의 라디오 버튼 중 하나만 선택 가능.
- checkbox : 다중 선택이 가능한 체크 박스.
- file : 파일을 첨부형태로 서버로 보낼 때 사용.
- image : 이미지 버튼으로 src 속성을 이용하여 이미지를 지정. alt 속성으로 대체 텍스트 지정 가능.
- submit : 전송 버튼.
- reset : 취소 버튼.
- button : 범용 버튼.
- hidden : 숨김 컨트롤. 화면에 표시되지 않고 데이터 송신 지정을 위한 컨트롤.
<input type=”컨트롤값” vlaue=”초기값” size=”크기” id=”식별자” name=”변수명” />
6. 목록 상자 <select>, <option>, <optgroup>
select와 option 요소를 이용.
드롭다운 메뉴와 리스트 박스.
<select name=”” id=””>
<option value=”초기값”>항목</option>
</select>
7. 여러 줄 글상자 <textarea>
여러 줄로 된 텍스트를 입력받을 때는 textarea 요소를 이용.
textarea 요소 안에서 입력한 텍스트의 내용이 길어지면 임의의 줄로 바뀜.
텍스트 수의 제한은 없음.
cols, rows 속성을 이용하여 영역크기를 지정.
<textarea cols=”” rows=”” name=”” id=””>
초기값이 되는 텍스트 작성
</textarea>
8. 버튼 요소 <button>
button 요소를 이용하는 경우는 input 요소의 submit, reset, button 등의 type값과 같음.
그러나 좀 더 유연한 디자인이 가능.
<button type=”버튼의 종류” name=”변수명” id=”식별자”>버튼명</button>
인라인 프레임과 개체 삽입
1. 인라인 프레임 <iframe>
인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe 요소를 사용.
IE의 독자적인 요소였으나 HTML 4.0과 HTML 4.01 dlgn wjdtlrdmfh wldnjs.
XHTML 1.0 Strict 와 XHTML 1.1 에서는 사용할 수 없음.
Transitional DTD 에서만 사용 가능.
<iframe src=”삽입할 문서” id=”식별자” name=”변수명” frameborder=”테두리 표현 여부” width=”가로 크기” height=”세로 크기” scrolling=”스크롤 여부” title=”삽입된 컨텐츠의 성격이나 내용을 대체할 수 있는 설명”>
프레임이 지원되지 않는 환경 대체 컨텐츠
</iframe>
2. 개체 삽입 <object>
이미지를 포함한 플래시 개체나 동영상, 사운드 등의 플러그인 개체를 의미.
IE와 IE가 아닌 다른 브라우저가 개체를 참조하는 방식이 다른 문제가 있음.
object 요소의 계층화 기법을 이용.
스타일과 스크립트
1. 내부 스타일 적용 <style>
가독성을 높이거나 시각적으로 화려하게 표현하려면 CSS(Cascading Style Sheet)를 이용.
CSS를 HTML 문서에 적용할 때 사용.
style 요소는 <head></head> 사이에만 올 수 있음.
<style type=”text/css”>
CSS 구문
</style>
<tag style=”css 구문”></tag>
* CSS 코드를 외부 문서로 삽입하는 경우.
<link rel="stylesheet" type="text/css" href=”CSS 파일 경로와 파일명”>
2. 스크립트 삽입 <script>
script 요소는 head 요소와 body 요소에 여러 번 삽입 가능.
<script type=”text/javascript>
스크립트 코드
</script>
* 스크립트 코드를 외부 문서로 삽입하는 경우.
<script type=”text/javascript” src=”스크립트 파일 경로와 파일명”></script>
그룹화 요소
1. 블록 그룹화 요소 <div>
div 요소는 분할, 나누기의 의미를 가짐.
그룹핑의 역할을 수행.
주로 블록 요소를 그룹화하기 위해 사용.
id, class 속성으로 해당 그룹의 의미를 부여할 수 있음.
레이아웃을 구현할 때 사용할 수 있고 논리적인 구조를 고려하여 서로 연관성 있는 컨텐츠를 그룹핑 하는 것이 좋음.
<div id=”coffee”>
<div class=”origin”>
블록 요소
</div>
<div class=”blending”>
블록 요소
</div>
</div>
2. 인라인 그룹화 요소 <span>
블록 요소를 그룹화 할때에 div를 사용했지만 인라인 요소를 그룹화 할때엔 span.
id, class 속성을 이용하여 그룹화한 요소에 의미를 부여.
span 요소가 인라인 요소이므로 블록 요소(p, ul 등등)를 포함할 수 없음.
<span>
인라인 요소
</span>
