문법 (input type)
--> form 태그 : 사용자와 프로그램 사이에 소통할 ㅅ ㅜ있는 태그 (가장 많이 사용!)
-
type="text"일때
- maxlength : 입력할 수 있는 최대 글자수
- disabled : 비활성화
- readonly : disabled 는 아예 클릭도 못하게 비활성화인데, readonly 는 클릭은 되지만 텍스트 입력이 X
- value : 값을 입력 가능
- placeholder : 아예 만들어진 속성
- type="password" 일때
- 입력을 보여주지 않는 비밀번호 태크
ex)
<input type="password"/>
- 입력을 보여주지 않는 비밀번호 태크
- type="radio" 일때
- 선택에 따른 입력
- 여러개의 선택사항 중에서 하나만 입력하도록 할때 주로 사용
ex)
<input type="radio"/> 남자 / <input type="radio"/> 여자
--> 두가지 선택 항목을 중복으로 선택할 수 X
ex)
<input type="radio" name="gender"/> 남자 / <input type="radio" name="gender"/> 여자
--> 두가지 선택 항목이 name="gender"라는 이름으로 공통적으로 들어가 있으므로 중복 선택이 불가능하다
ex) test7.html
-->
- textarea ( textarea는 특이하게 빈태그 /> 로 닫아주는것이 아닌 따로 닫아줌)
<textarea roows="3" cols="40"></textarea>: 3행의 각 행마다 40글자까지 입력할 수 있는 텍스트 범위칸 만들기
-
type="checkbox" 일때
- 중복 선택 될 수 있다
- 나중에 백엔드랑 연동할 것을 생각하여 미리 name으로 묶어두면 편하다
- 체크박스 부분이 아닌 글자 부분을 눌러도 체크되게 하려면 label 속성 사용한다
ex) test7-1.html
-->
- type="button" 일때
- 기본적인 버튼을 생성
- type="image" 일때
- 이미지 버튼을 생성
- type="submit" 일때
- 제출하는 버튼을 생성
- type="reset" 일때
- 입력취소 버튼을 생성
- 입력받은 내용물들을 삭제
- type="file" 일때
- 파일선택 버튼을 생성
- type="hidden" 일때
- 서버에게 몰래 무언가를 전송할때 사용
ex) test7-2.html
-->
문법 (select)
- 감춰놨다가 버튼을 누르면 나오는 태그 (단일선택)
- 체크박스에서 맨 처음 선택되어져 나오는 option을 선택하려면
<option selected="selected"></option> - 맨처음 보여지는 select 의 option 크기를 설정하려면
<select size="숫자"></select> - 중복선택을 가능하게 하려면
<select multiple="multiple"></select>
***
ctrl 누르면 중복선택, shift 누르면 연속선택
ex) test7-3.html
-->
