post IT

input 태그

• 인라인태그
• 사용자가 입력할 부분에 주로 <input>태그를 이용함. 다양한 input의 옵션은 type 속성에 의해 결정 된다.

<!--기본형-->
<input type="유형" [속성="속성 값"]>

• id속성 : 여러번 사용된 폼 요소를 구분하기 위해 사용.
  id속성을 지정해 놓으면 <label>태그를 이용해 캡션을 붙일 수 있고, CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있음.

text 타입에서 사용할 수 있는 속성

checkbox & radio 타입에서 사용할 수 있는 속성

<!--사용예제-->
<form action="">
    <fieldset>
         <legend>신청과목 <small>(1과목)</small></legend>
         <label for="music"><input type="radio" name="subject" id="music" value="music">음악</label>
         <label for="math"><input type="radio" name="subject" id="math" value="math">수학</label>
         <label for="english"><input type="radio" name="subject" id="english" value="english" >영어</label>
    </fieldset>
</form>

• for - id - value : 같은 값으로 지정.
• name : 같은 분류 안에서 동일한 name으로 지정.

number & range 타입에서 사용할 수 있는 속성

textarea 태그

<!--기본형-->
<textarea [속성="속성 값"]> 내용 </textarea>
<!-- 내용에 글을 미리 입력해둘 수 있다. 내용이 없으면 빈 텍스트 영역. 
	내용부분엔 공백이 그대로 표시되어 나타난다.-->

a태그 (인라인태그)

<!-- 기본형 -->
<a href="링크주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>

a 링크 태그 속성

form태그 (블록태그)

<!--기본형-->
<form [속성="속성 값"]> 여러 폼 요소 </form>

form 태그 속성

label 태그 (인라인태그)

<!--기본형-->
<label [속성="속성 값"]> 레이블명 <input ...> </label>

또는

<label for="id명"> 레이블명 </label>
<input id="id명" [속성 = "속성 값"]>
<!-- <label> 태그를 사용한 텍스트 부분과, 사용자 입력을 받는 <input> 소스가 떨어져 있더라도 
id명을 통해 둘 사이를 쉽게 연결 할 수 있는 장점이 있음. 

<label>에서 for와 id는 항상 함께, 같은 이름으로 사용해야 한다.-->

• 폼 요소에 레이블을 붙임. (레이블 : 입력 창 옆에 '아이디', '비밀번호' 처럼 붙여 놓은 텍스트)
• <label> 태그를 이용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음.
• 체크박스와 라디오 박스에 <label>을 감싸주면, 텍스트 영역까지 클릭 범위가 확장 된다.
  대부분의 폼에서 이 방식을 이용함.

• 블록태그 : 항상 새 라인에서 시작, 양 옆에 컨텐츠를 배치하지 않음
• 인라인태그 : 블록 안에 위치, 현재 위치에 이어서 시작, 양옆에 컨텐츠 배치 가능