사용자 입력을 위한 : <input>
<input>태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용함.
<input>태그에서 사용할 수 있는 다양한 type 속성은 다음과 같다.
text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.
password : 비밀번호를 입력할 수 있는 필드를 넣는다.
search : 검색할 때 입력하는 필드를 넣는다.
url : URL주소를 입력할 수 있는 필드를 넣는다.
email : 이메일 주소를 입력할 수 있는 필드를 넣는다.
tel : 전화번호를 입력할 수 있는 필드를 넣는다.
checkbox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣는다.
radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
number : 숫자를 조절할 수 있는 스핀 박스를 넣는다.
range : 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
date : 사용자 지역을 기준으로 날짜(연,월,일)를 넣는다.
month : 사용자 지역을 기준으로 날짜(연,월)를 넣는다.
week : 사용자 지역을 기준으로 날짜(연,주)를 넣는다.
time : 사용자 지역을 기준으로 시간(시,분,초,분할 초)을 넣는다.
datetime : 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
submit : 전송 버튼을 넣는다.
reset : 리셋 버튼을 넣는다.
image : submit버튼 대신 사용할이미지를 넣는다.
button : 일반 버튼을 넣는다.
file : 파일을 첨부할 수 있는 버튼을 넣는다.
hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
type=”text” 와 type=”password” 일때 자주 사용하는 속성
size : 텍스트와 비밀번호 필드의 길이를 지정함. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정함. 예를 들어 최대로 입력할 수 있는 글자 수가 10개인데 size 속성값을 5로 지정하면 필드크기는 5개 글자 크기에 맞추고 나머지 5개 글자는 화면에 보이지 않는다.
value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용임. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됨. 비밀번호 필드에서 사용하지 않는 속성임.
maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정함.
사용 예시
<form>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">
</fieldset>
</form>
이런식으로 나타나게 된다.
다양한 용도에 맞게 입력하는 type=”search”, type=”url”, type=”email”, type=”tel”
텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공함.
이 필드들은 텍스트 필드를 기본으로 하기에 앞에서 설명한 텍스트 필드와 거의 같은 속성을 사용함.
- type=”search” 은 웹 브라우저 화면에서 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식함.
- type=”url” 은 웹 주소를 입력하는 필드이다.
- type=”email” 은 이메일 주소
.HTML5 이전까지는 입력한 값이 이메일 주소인지,URL 주소인지 자바스크립트를 이용해서 직접 확인해야 했다.
그러나 HTML5에서는 type=”email”처럼 이메일 주소 필드로 지정하기만 하면 웹 브라우저에서 알아서 확인함.
만일 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여 줌.
- type=”tel” 전화번호를 나타내는 필드.
전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화번호인지 아닌지 체크할 수 없다. 모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있다.
텍스트 필드에서 세분화된 필드는 PC용 웹브라우저에서는 별 차이 없어보이지만 모바일 웹 브라우저에서는 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있다.
체크박스, 라디오버튼 태그: type=”checkbox” , type=”radio”
체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다.
이때
- 항목을 1개만 선택하려면 라디오 버튼을 사용
- 2개 이상 선택하려면 체크 박스를 사용
라디오 버튼은 항목을 1개만 선택할 수 있으므로 이미 선택한 항목이 있을 경우 다른 항목을 선택하면 기존 항목은 취소됨.
체크 박스는 항목을 2개 이상 선택할 수 있다는 점만 빼면 라디오 버튼 사용법과 비슷함.
<input type="checkbox">
<input type="radio">
체크 박스와 라디오 버튼에서 사용할 수 있는 속성은 다음과 같다.
value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정함. 이 값은 영문이거나 숫자여야 하며 필수 속성임.
checked : 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용함. 속성값은 따로 없다.
</fieldset>
<p><b>포장 선택</b></p>
<li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
<li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</fieldset>
라디오 버튼과 name 속성
간혹 HTML 소스 코드를 보면 라디오 버튼에 name속성이 포함된 것을 볼 수 있다. name 속성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용함. 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 다음과 같이 모든 라디오 버튼의 name값을 똑같이 지정해야 함.
숫자 입력 필드를 나타내는 type=”number”, type=”range”
텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 type=”number”를 사용하면 스핀박스가 나타나서 숫자를 선택할 수 있다.
type=”range”는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
<input type="number">
<input type="range">
type=”number” , type=”range” 필드에서 사용할 수 있는 속성은 다음과 같다.
min : 필드에 입력할 수 있는 최솟값을 지정함. 기본 최솟값은 0
max : 필드에 입력할 수 있는 최댓값을 지정함. 기본 최댓값은 100
step : 숫자 간격을 지정할 수 있다. 기본값은 1
value : 필드에 표시할 초깃값
날짜 입력을 나타내는 type=”date” ,type=”month”, type=”week”
<input type="date | month | week">
// '|'기호는 나열한 옵션 중 하나가 속성값이 되어야 한다는 뜻.
type=”date” : 달력에서 날짜를 선택해서 입력할 수 있음. 날짜를 선택하면 필드에 “yyyy-mm-dd”형식으로 연도,월,일이 표시됨.
type=”month” : 달력에서 월을 선택해서 입력할 수 있음. 월을 선택하면 “yyyy-mm”형식으로 연도,월까지만 입력됨.
type=”week” : 달력에서 주를 선택해서 입력할 수 있음. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됨.
시간 입력을 나타내는 type=”time” ,type=”datetime”, type=”datetime-local”
시간을 지정할 때는 type=”time”을 사용하고 날짜와 시간을 함께 지정하려면 type=”datetime”이나 type=”datetime-local”을 사용함.
<input type="time | datetime | datetime-local">
type=”time”은 폼에서 시간을 입력하게 함. 시간 입력 필드는 웹 브라우저마다 조금씩 다르게 나타나는데 항목이 3개로 구성된다는 점은 같음.
첫 번째 항목부터 ‘오전’과 ‘오후’를 의미하고 나머지는 ‘시’와 ‘분’을 의미함.type=”datetime” 또는 type=”datetime-local”유형을 사용하면 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있다.
날짜, 시간의 범위를 지정하는 속성
min,max : 날짜나 시간의 범위를 제한할 때 사용함. min속성은 범위의 시작 날짜나 시간을, max 속성은 범위의 마지막 날짜나 시간을 지정.
step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정.
value : 기본적으로 표시할 날짜나 시간을 지정함.<input type="date" min="2020-02-01" max="2020-02-15"> //사용예시
전송,리셋 버튼을 나타내는 type=”submit”, type=”reset”
submit은 폼에 입력한 정보를 서버로 전송함.
submit 버튼으로 전송된 정보는 <form>태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨짐.
반면에 reset 버튼은 <input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 함.
이때 value속성을 사용해서 버튼에 표시할 내용을 지정함.
<input type="submit | reset" value="버튼에 표시할내용">
이미지 버튼을 나타내는 type=”image” (submit 버튼과 같은 기능)
submit과 같은 기능을 하지만 이미지인 버튼임.
<input type="image" src="이미지 경로" alt="대체 텍스트">
기본 버튼을 나타내는 type=”button”
type=”button”은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼형태만 삽입함.
주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용함.
다음과 같이 value 속성을 사용해 버튼에 표시할 내용을 지정함.
<input type="button" value="버튼에 표시할 내용">
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
//이렇게 하면 버튼을 눌렀을때 자바스크립트의 window.open()함수를 실행함.
파일 첨부할 때 사용하는 type=”file”
폼에서 사진이나 문서를 첨부해야 할때 사용.
type=”file”유형을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기]버튼 등이 표시되는데,
이 버튼을 클릭하고 파일을 선택하면 파일이 첨부됨.
<input type="file">
//첨부한 파일을 서버로 보내려면 자바스크립트 등 웹 프로그래밍 언어를 사용해야 함.
여기에서는 파일 첨부 버튼을 만드는 것만 함.
히든 필드 만들 때 사용하는 type=”hidden”
화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소임.
사용자에게 굳이 보여 줄 필요는 없지만 관리자는 알아야 하는 정보를 히든필드로 입력함.
<input type="hidden" name="이름" value="서버로 넘길 값">
아래는 히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨주는 예시.
로그인 버튼을 누르면 입력한 정보와 함께 히든 필드의 내용이 서버로 함께 전송됨.
<form>
<fieldset>
<input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">
</fieldset>
</form>
'FrontEnd > HTML' 카테고리의 다른 글
HTML 수평선 그리기 (0) | 2022.08.07 |
---|---|
HTML 폼에서 사용하는 태그 (0) | 2022.08.07 |
HTML 다양한 파일 삽입 (0) | 2022.08.07 |
HTML 이미지 삽입하기 (0) | 2022.08.07 |
HTML 하이퍼링크 삽입 (0) | 2022.08.07 |