label태그
폰 요소에 이름을 붙이는 태그. 사용자가 어떤 내용을 입력할지 쉽게 알아볼 수 있도록 해주는 역할을 함. 또한 폼 요소와 해당 이름을 연결해주고 나중에 자바스크립트를 통해 해당 폼 요소를 제어할 수 있도록 도와준다.
[기본형]
1.<label for="폼요소 이름"> 내용 <input type="" id="폼요소 이름" name="폼요소 이름"/></label>
2.<lablel for="폼요소 이름"> 내용 </label>
<input type="" id="폼요소 이름" name="폼요소 이름"/>
input태그
input태그는 사용자가 정보를 입력할 수 있는 다양한 형태의 태그. 형태는 type속성에 의해 결정된다.
*input에는 value값이 들어가는데 value는 초기값을 의미한다.
[type의 종류]
1.텍스트 입력 속성 type="text"
:한 줄짜리 텍스트를 입력할 수 있는 입령창. 보통 아이디, 이름, 주소, 핸드폰번호와 같은 정보를 입력할 때 쓴다.
실무에서는 보통 '텍스트 필드'라고 부른다.
2.비밀번호 입력 속성 type="password"
:비밀번호 입력창. 모양은 text와 동일하게 생겼지만 글자를 입력하면 글자가 기호로 표현된다.
3.검색창 입력 속성 type="search"
:검색창을 나타내는 태그. 모양은 텍스트 필드와 동일하지만 글자를 입력하면 입력창 오른쪽에 x자 표시가 뜬다. x를 누르면 검색어를 지울 수 있다.
4.인터넷 주소 입력 속성 type="url"
:인터넷 주소인 url을 입력할 수 있는 입력창이다.
5.이메일 입력 속성 type="email"
:이메일을 입력할 수 있는 입력창이다. @표시가 있는지 없는지 여부를 입력창에서 검열하여 올바른 이메일 주소가 맞는지 1차로 확인해주는 역할을 한다. 확인 버튼을 눌러야 검사를 한다.
6.체크속성 type="checkbox"
:여러개의 항목을 체크할 때 사용함. 사용자로부터 어떠한 동의를 얻거나 2개 이상의 항목을 체크할 때
사용한다.
7.type="radio"
:여러 개의 항목 중에 한 가지를 선택할 때 사용한다. 이 타입은 모든 name속성이 이름이 동일해야
여러 항목 중 한 가지만 선택할 수 있다.
*checkbox,radio는 value속성을 넣어주면 각 항목의 기본값을 지정할 수 있다. value에 있는 값은 form을 서버로 넘길 때 같이 저장할 수 있고 나중에 javascript로 제어할 수있다.
체크박스속성은 기본적으로 여러 항목을 선택할 수있지만 radio속성은 두개 이상의 radio태그를 작성할때 name이 동일해야 선택사항에서 한가지를 선택할 수있다.
8.범위 속성 type="range"
min="최솟값" max="최댓값" step="증감" value="초깃값"
:슬라이드 막대로 숫자 범위를 설정할 수 있다.
min이나 max가 따로 설정되어 있지 않으면 최솟값은 0, 최댓값은 100으로 설정된다.
min은 범위의 최솟값을 의미한다. max는 최댓값을 뜻한다.
step은 증감값으로 예를들어 5라는 숫자가 있으면 5씩 증가하거나 5씩 감소한다. 숫자 단계를 설정.
value는 범위에서 사용자에게 처음 보여주는 초깃값을 말한다.
9.숫자 입력 속성 type="number"
min="최솟값" max="최댓값" step="증감" value="초깃값"
:숫자 입력 필드를 말한다. 보통 쇼핑몰같이 수량을 체크해야하는 사이트에서 많이 사용함.
10.날짜에 관련된 속성
type="date" , type="month" , type="week"
:웹 문서나 어플에 달력을 넣고자 할 때 사용함. date는 연/월/일로 달력에 표시되며
month는 연도랑 월을 입력할 수 있다. week는 연도와 주를 입력할 수 있다.
-date : yyyy-mm-dd
-month : yyyy-mm
-week : 1월 첫째 주를 기준으로 몇 번째 주인지 표시
11.시간에 관련된 속성
type="time" , type="datetime" , type="datetime-local"
:time은 입력 폼에서 오전/오후 시/분을 나타냄. 시간 입력 필드는 웹 브라우저마다 조금씩
다르게 나타나는데 항목이 3가지로 구분된다는 점은 모두 동일하다.
datetime, datetime-local은 사용자가 웹 문서를 보고 있는 장소에 맞는 날짜와 시간을 함께 입력할 수 있다.
12.전송버튼과 초기화 버튼
type="submit" , type="reset"
:submit은 전송버튼을 의미하며 action에 쓰여진 서버 주소로 내용을 전송한다.
reset은 초기화 버튼을 의미하며 사용자가 입력한 내용들을 초기화 할때 사용함.
submit 버튼과 reset버튼에 value속성을 이용하면 버튼의 이름을 바꿀 수 있다.
*ctrl+f: 검색어 찾기기능
*type="button"
button은 기본 기능이 없는 깡통버튼을 의미한다. 오직 버튼 형태만 나타나며 value속성으로
버튼 이름을 정해주어야 한다. 자바스크립트로 기능을 넣을 때 많이 사용하는 버튼이다.
13.이미지를 넣은 전송버튼
type="img" src="이미지경로" alt="이미지설명"
:submit과 같은 기능을 하는 이미지 버튼을 나타냄.
-버튼을 꾸며줄 수있다.
14.문서첨부 속성
type="file" accept="첨부 파일 유형(image/jpg,image/png,image/*)"
:폼에서 사진이나 문서를 첨부할 때 사용하는 유형이다.
웹브라우저 화면에서 [파일 선택]이나 [찾아보기] 같은 형태로 나타난다.
15.숨겨주는 속성
type="hidden" name="이름" value="서버를 넘길 값"
:히든 필드는 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소를 말한다. 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야하는 정보는 히든필드로 입력한다.
input 태그의 주요 속성
1.autofocus
:페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
입력 요소 중 텍스트를 입력할 수 있는 양식에 autofocus를 사용하면 입력 커서가 깜빡이면서
텍스트를 바로 입력할 수 있게 해준다.
2.required
:필수 입력란을 지정함. 이 속성이 들어있는 input은 반드시 사용자가 입력을 해야만 전송버튼을 눌렀을때 폼양식을 서버로 보내줄 수 있다.
3.placeholder
:사용자가 텍스트를 입력할때 입력란에 적당한 힌트 내용을 표시해주는 안내문구.
텍스트를 입력하면 힌트가 사라지고 텍스트를 지우면 다시 힌트가 나타난다.
4.readonly
:읽기 전용이라는 뜻을 가진 속성. readonly를 적용하면 사용자는 텍스트를 입력할 수 없고
읽기만 가능하다.
disable과 readonly의 차이점은
disable은 아예 활성화가 되지 않는다.
