choice blog

식별자

id

사용목적 : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 한 개의 문서당 한 개만 유효(중복 불가)

class

사용목적 : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 

name

사용목적 :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

form 태그 : 이동 목적(연결)

입력 양식에 데이터를 입력하고 쿼리 전송 버튼을 누르면 데이터가 지정된 장소에 지정된 방법으로 전달된다.

참조

 body 태그 안에서 쓰인다.

form 속성

 action : 입력 데이터의 전달 위치를 지정

 input : 사용자에게 정보를 입력받는 기능을 수행함.

 value :  input 태그의 내부에 들어가는 글자

 textArea : 여러 줄의 글자를 입력할 때 사용

 select : 여러 개의 목록에서 몇 가지를 선택할 때 사용

 input type 속성 값

 submit : 제출 버튼 생성, form당 1개만 생성 가능

 text : 글자 입력 양식 생성

 password : 비밀번호 입력 양식 생성

예시

<!-- web페이지 -> web페이지이동 -->
<form action="NewFile.jsp">

ID:<input type="text" name="id" title="여기에 id 기입" size="10" placeholder="id 기입">
<br><br>
PW:<input type="password" name="pwd" size="10">
<br>

<!-- 버튼만들기 -->
<input type ="submit" value="NewFile.jsp 이동">
</form>

실행화면

ID:

PW:

checkbox : 체크박스 생성

참고

checkbox는 다중선택이 가능하다.

checked="checked"  : 체크되어 있는 상태로 실행된다.

예시

<input type="checkbox" value="패션" checked="checked">패션<br>
<input type="checkbox" value="음악">음악<br>
<input type="checkbox" value="게임">게임<br>

실행화면

패션

음악

게임

 radio : 라디오 버튼 생성

참고

 name으로 묶어 어주야 1개만 선택 가능하다.

예시

<!-- name="car"로 묶어 주어야 1개만 선택 가능하다 / name묶기 전 다중선택 가능 -->
<input type="radio" name="car" value="벤츠">Benz
<input type="radio" name="car" value="아우디">아우디
<input type="radio" name="car" value="BMW">BMW

실행화면

Benz

아우디

BMW

HTML5 입력 양식 태그

number : 숫자 선택 양식 생성

date :  일 선택 양식 생성

color : 색상 선택 양식 생성

range :  범위 내 슬라이스를 생성

search :  검색창 생성

예시

<!-- 1~5 까지 선택할 수 있는 거 생김..  -->
number : <input type="number" max="5" min="1">
<br>

<!-- 달력 생성 -->
<!-- 달력이 2개면 언제부터 언제까지 ! -->
date : <input type="date">
<br>


<!-- 컬러 선택 할 수 있음  -->
color : <input type="color" value="#ff0000">
<br>

<!-- 슬라이드 생성  -->
range : <input type="range" max="10" min="0">
<br>

<!-- 검색창 생성 -->
search : <input type="search">

실행화면

number :

date :

color :

range :

search :

textArea 

속성

 rows : 태그의 너비 지정

 cols : 태그의 높이 지정

예시

<textarea rows="10" cols="30">초기문자열</textarea>

실행화면

초기문자열

select

속성 값

 multiple="multiple" : 컨트롤 키 눌러서 다중 선택 가능

예시

<select multiple="multiple">
	<option value="apple">사과</option>
	<option value="pear">배</option>
	<option value="banana">바나나</option>
	<option value="grape">포도</option>
</select>

실행화면