4-2 데이터 입력과 선택
텍스트 입력 -> 일반 텍스트 입력
: <input type="text" ... >
-> 한 줄에 해당하는 짧은 텍스트를 입력할 때 사용
-> 데이터를 출력하는 용도로도 사용 가능
-> value 속성 : 초기에 입력창에 표시되는 텍스트 지정
: textarea 요소
-> 여러 줄에 해당하는 텍스트를 입력(출력)할 때 사용
-> 속성 : rows, cols, name, wrap, readonly
: autofocus, disabled, form, maxlength, placeholder, required
여러 줄의 텍스트를 입력하는 textarea 요소
<textarea rows="숫자" cols="숫자" ... >
</textarea>
textarea 속성
| name="이름" | 텍스트 영역의 이름 |
| rows="숫자" | 텍스트 영역의 높이(라인 수) |
| cols="숫자" | 텍스트 영역의 너비(한 줄의 입력할 수 있는 글자 수) |
| wrap="값" | 폼으로 전송될 때 줄바꿈 포함 여부 * soft : (기본값) 자동으로 줄바꿈이 포함되지 않음 * hard : 자동으로 줄바꿈이 포함되어 전송(cols 속성 지정이 필요) |
| readonly | 읽기 전용(입력 불가, 출력용)으로만 사용 |
입력)
출력)
// autofocus로 테두리 진하게 해 입력 표시를 한다.
// placeholder로 참조할만한 문자열을 보여준다.
텍스트 입력 -> 특정 형식의 텍스트 입력
-비밀번호 입력 : <input type="password" ...>
-검색어 입력 : <input type="search" ...>
-전화번호 입력 : <input type="tel" ...>
-URL 입력 : <input type="url" ...>
-이메일 주소 입력 : <input type="email" ...>
*기본 출력 모양은 텍스트 타입과 동일 -> 입력 대상을 명확히 지정
*텍스트 타입에서 사용된 속성은 모두 사용 가능
*비밀번호 -> 입력한 문자가 다른 기호로 대체되어 표시됨
* URL, 이메일 주소 -> 자동으로 입력값에 대한 유효성 검사 수행
입력)
// required : 필수 입력
// form 태그 안에 있지 않지만, submit의 form="frm_id"가 form 태그의 id와 일치하므로 form 태그에 속한다.
출력)
숫자 입력
-특정 범위의 숫자 입력
: <input type="number" ...>
: <input type="range" ...>
-주로 사용되는 속성
-> min, max : 입력 가능한 숫자의 최소값과 초대값
-> step : 입력값의 유효한 간격
-> value : 초기값 또는 현재 입력한 값
입력)
출력)
데이터 선택 -> 항목 선택
: 나열된 여러 선택 항목 중에서 원하는 항목 선택
-> 라디오 버튼 : <input type="radio" ... >
*같은 그룹의 항목 중에서 오직 1개의 항목만 배타적 선택 가능
-> 체크박스 : <input type="checkbox" ... >
*여러 항목의 동시 선택이 가능. 기호 성향을 파악하는 용도
-> 주로 사용되는 속성
* name="이름" : 같은 그룹에 속하는 항목은 동일한 속성값 부여
* value="텍스트" : 각 항목마다 서로 다르게 부여되는 항목의 내용
: 서버로 전달되는 값(형식 : name="value")
* checked : 초기값으로 선택되는 항목 지정
radio 입력)
// name이 같은 것끼리 한 그룹.
radio 출력)
checkbox 입력)
checkbox 출력)
데이터 선택 -> 파일 선택
: 자신의 시스템에 있는 파일을 선택하는 버튼 생성
<input type="file" ... >
-속성
* accept="파일유형" : 선택할 수 있는 파일의 유형 지정
* multiple : 동시에 여러 파일을 선택할 수 있도록 지정
입력)
출력)
데이터 선택 -> 데이터 리스트에서의 선택
: 주어진 데이터 옵션 리스트로부터 원하는 데이터 선택
-select 요소
: 드롭다운 리스트를 만드는 경우
형식)
속성)
-> name="이름" : 드롭다운 리스트의 이름
-> size="숫자" : 한 번에 화면에 보이는 항목의 개수
-> multiple : 여러 항목을 한 번에 선택할 수 있도록 지정
-> autofocus, disabled, form, required
-datalist 요소
: <input type="text" ...>에 대한 옵션 리스트 지정
: 지정한 텍스트 타입이 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시
형식)
입력)
출력)
// input 창에 focus를 주면 datalist들이 보여진다.
-option 요소
: select/datalist 요소의 하위 요소 -> 옵션 리스트의 각 옵션 정의
속성)
-disabled : 해당 옵션의 비활성화
-selected : 페이지가 로드될 때 미리 선택될 초기 옵션 지정
-value="텍스트" : 서버로 전달되는 항목의 값
입력)
// select태그의 size="5" multiple로 바꾼다면
// 5개를 한꺼번에 보여준다. 그리고 multiple로 여러 항목 선택 가능.
출력)
옵션을 그룹핑하는 optgroup 요소
optgroup 미적용)
optgroup 적용)
데이터 선택 -> 색상 선택
: 색상표를 통해 원하는 색상 선택
<input type="color" ... >
입력)
출력)
버튼 생성
: input 요소의 type 속성은 4가지 형태의 버튼 제공
-> 제출 버튼("submit")
: 입력한 데이터를 form 요소의 action 속성에서 지정한 서버로 전송
: 기본 버튼명(value 속성 미사용) -> "제출"(크롬의 경우)
-> 리셋 버튼("reset")
: 입력하고 있는 데이터를 모두 지우고 초기화
: 기본 버튼명 -> "초기화"(크롬의 경우)
-> 이미지 버튼("image")
: 이미지를 사용해서 제출 버튼의 기능을 만들 때 사용
-> 속성 : src, width, height, alt
-> 일반 버튼("button")
: 클릭을 통해 자바스크립트 코드를 수행하는 경우에 사용
-속성
-> value="버튼명" : 버튼 위에 표시되는 이름
button 요소
: 클릭할 수 있는 버튼을 정의
-> 버튼 위에 텍스트 및 이미지도 표시 가능
ex)
날짜 및 시간 선택
-형식 : <input type="_" ... >
-> date : 날짜(년, 월, 일)
-> month : 년, 월
-> week : 년, 주차
-> time : 시간(시, 분, 초)
-> datetime-local : 날짜, 시간
-속성
: min, max, step, value
입력)
출력)
