사용자의 정보를 입력할 때 사용하는 input 태그는 자주 쓰이는 type 유형들이 있어 잘 숙지하고 넘어가야한다.
1. select 요소
사용자가 폼에서 옵션의 목록에서 선택 할 수 있도록 보여주는 폼 요소이다.
라디오 타입의 input과 비슷한 역할을 가지고 있지만 라디오 타입의 input은 다 펼쳐서 보여지는 반면에
select 요소는 옵션들을 모두 숨기고 선택된 한 가지만 보여준다. 또한 한 가지 선택이 아닌 복수로 선택할 수도 있다.
select 요소는 내부에 한개 이상의 option 요소를 가지고 있다.
사용자는 option을 선택하고 선택된 option 요소의 값은 서버로 전송하게 된다.
<label for="select-id">점수 선택</label>
<select name="score" id="select-id">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
1-1. select 요소의 속성
▶ multiple 속성
기본적으로 select 요소는 option 한개만 선택 가능한데
multiple 속성을 줄 경우에는 사용자가 ctrl / shift 키를 누르면서 여러 값을 선택 할 수 있다.
▶ size 속성
option을 몇개 보여줄지 정하는 속성이다.
보통 기본 select 요소의 노출 수는 1개, multiple 경우에는 4개가 기본값이다.
1-2. option 요소의 속성과 optgroup
option 요소는 자신의 내부에 다른 요소는 포함할 수 없고 오로지 텍스트만 포함할 수 있다.
1-3. optgroup 요소
option을 그룹화 해주는 요소이다.
label 속성으로 그룹의 명칭을 지어주며 disabled 속성으로 해당 그룹으로 묶은 option들을 비활성화 할 수 있다.
<select>
<optgroup label="Red">
<option value="A">Apple</option>
</optgroup>
<optgroup label="Yellow" disabled="disabled"> <!-- 그룹 비활성화 -->
<option value="B">Banana</option>
<option value="O">Orange</option>
<option value="M">Mango</option>
</optgroup>
<option value="P">Pear</option>
</select>
2. <textarea> - 긴 글 텍스트 넣는 태그
이 요소는 <input type="text">와 비슷한 형태지만 <input type="text">는 한 줄만 입력가능하고
긴 글을 위해서는 <textarea> 요소를 사용해야한다.
<textarea>는 높이와 너비를 가진 박스이기 때문에 그 속성을 필수로 선언해 주어야한다.
width, height 아닌 입력된 글자를 기준으로 정해지기 때문에 cols, rows의 속성을 사용해야한다.
- cols - 요소의 너비를 나타내는 속성. 한줄에 몇 글자까지 들어갈지를 정한다. (ex. cols="40" > 너비는 40글자이다.)
- rows - 요소의 높이를 나타내는 속성. 높이가 몇 줄로 나타날지 정한다. (ex. rows="5" > 다섯줄의 높이를 가진다.)
<textarea name="content" cols="40" rows="8" >
폼의 기본 내용 값이 들어갑니다.
줄 바꿈 및
공란도 그대로 인식하고,
<strong>이런 태그도</strong> 소스가 그대로 노출됩니다.
</textarea>
3. <input type="OOO"> - type 종류 알아보기
3-1. <input type="text">와 <input type="password">
로그인 화면을 제작할 때 사용되는 type들이다.
type="text"는 글을 입력할 수 있는 타입이며 type="password"는 입력한 글이 화면에 안보이도록 숨기는 역할을 한다.
그래서 비밀번호를 입력할 때 많이 쓰인다.
<form>
<div>아이디 : <br/><input type="text" name="id" value=""></div>
<div>비밀번호 : <br/><input type="password" name="pwd" value=""></div>
</form>
3-2. <input type="submit">
input 에서 type="submit"은 form과 함께 쓰인다. form태그 내부에 있어서 클릭하면 컨트롤들의 데이터 값을
서버로 전송하게 된다. 자바스크립트로 보자면 document.form.sumbit() 함수가 호출 된 것.
값이 전송되는 위치는 action 속성에 있는 주소로 전송하게 된다.
<form action="action.jsp">
<div>아이디 : <br/><input type="text" name="id" value=""></div>
<div>비밀번호 : <br/><input type="password" name="pwd" value=""></div>
<div><input type="submit" value="전송"></div>
</form>
3-3. <input type="radio">
radio 타입은 버튼을 라디오 옵션 박스로 만드는 것이다. 라디오 박스 특징은 여러 라디오 박스 중 하나만 선택 가능하다.
태그에 있는 checked는 라디오 박스에 기본값으로 체크 된 상태에서 로딩하라는 표시이다.
라디오 박스는 여러개 중 하나만 선택되어야 하는데 name 값이 같지 않거나 없다면 제 기능을 발휘하지 못한다.
만약 라디오 박스 속성에 name 없으면 라디오 박스를 모두 체크하거나 해제할 수 있는데 그것은 라디오 박스라고 할 수 없다.
<form action="action.jsp">
<div><input type="radio" name="sex" value="male" checked>남성</div>
<div><input type="radio" name="sex" value="female">여성</div>
<div><input type="submit" value="전송"></div>
</form>
3-4. <input type="checkbox">
다중 선택이 가능하도록 만들어진 타입입니다. name 값이 같더라도 여러 개 선택이 가능.
서버에서 값을 받을 때 어떤 name에 값인지 구분하기 쉽도록 다르게 표현하는것이 좋다.
<form action="action.jsp">
<p>주문 음식을 표시하세요</p>
<div><input type="checkbox" name="food01" value="mandoo" checked>만두</div>
<div><input type="checkbox" name="food02" value="jjajang">짜장</div>
<div><input type="submit" value="전송"></div>
</form>
3-5. <input type="button">
가장 많이 쓰이는 타입. 버튼을 만들어 클릭햇을 때 이벤트를 발생 시킬 수 있다.
type="submit"은 클릭 햇을 때 form 요소의 값을 목적이로 전송하도록 액션을 수행하지만 type="button"은 버튼을 눌러도 아무 동작을 하지 않는다. 동작을 하게 하려면 onclick 속성에 javascriptㄹ 코드를 넣으면 된다.
* 아래 소스는 type="button" 이지만 type="submit" 효과처럼 만들엇다.
<form id="frm" action="action.jsp">
<p>주문 음식을 표시하세요</p>
<div><input type="checkbox" name="food01" value="mandoo" checked>만두</div>
<div><input type="checkbox" name="food02" value="jjajang">짜장</div>
<div><input type="button" onclick="document.getElementByid('frm').submit();" value="전송"></div>
</form>
3-6. <input type="file">
파일을 첨부하고자 할 때 쓰는 type이다. type="file" 을 주게 되면 자동으로 파일 열기 팝업창이 뜨게 된다.
별도 설정없이 파일 명을 가져와서 서버로 보낼 수 있다. 팝업창으로 파일을 선택하게 되면 버튼 바로 옆 텍스트로 파일명이 표시된다.
3-7. <input type="image">
이미지 버튼이라고 할 수 있는데 주의할 점은 이 타입은 type="submit" 타입과 같은 폼 전송이 일어난다는 점이다.
단지 이미지 버튼을 위해 이 타입을 사용하면 안된다. 폼 전송 없이 단지 버튼으로 기능하려고 이 타입을 사용하면 별도로 스크립트 처리가 필요하기에 그냥 button으로 css 처리하는것이 더 좋다.
<input type="image" src="img-button.png" alt="내용 전송" />
* 이미지가 들어가기때문에 src 속성으로 이미지 url 주소를 적고 alt 값을 넣어 대체 텍스트를 넣는것을 확인할 수 있다.
3-8. <input type="hidden">
css에서 display:none 상태와 비슷하다고 생각하면 된다. 이 요소는 절대 보이지 않기 때문에 css로 display:block을 준다하더라도 보여지지 않는다. 사용자가 입력한 정보 외에 데이터들을 보이지않게 같이 전송할때 type="hidden"를 사용한다.
<input type="hidden" name="abc" value="something" />
3-9. <input type="email">
type="email" 값일 때 전송하게되면 input 입력값이 이메일 형식에 맞는지 체크 한다.
메일 구성 요소 중 '@'가 빠지면 입력창 하단에 제대로 입력하지 않았다는 문구로 알려준다.
<form id="frm" action="action.jsp">
<p>이메일 입력하세요</p>
<div><input type="email" id="useremail" name="useremail"></div>
<div><input type="submit" value="전송"></div>
</form>
3-10. <input type="search">
크롬이나 사파리에서만 사용 가능하다. 크로스브라우징이 안되기에 잘 사용하지는 않는다.
검색어를 입력하게되면 오른쪽 끝에 X 버튼이 나타나게 된다.
<form id="frm" action="action.jsp">
<p>검색입력 : </p>
<div><input type="search" id="usersearch" name="usersearch"></div>
<div><input type="submit" value="전송"></div>
</form>
3-11. <input type="url">
입력란에 http:// 가 앞자리에 와야한다. 값을 제대로 넣지 않으면 url 제대로 입력하라고 하단에 풍선 도움말을 보여준다.
<form id="frm">
<p>url 입력하세요</p>
<div><input type="url" id="userurl" name="userurl"></div>
<div><input type="submit" value="전송"></div>
</form>
3-12. <input type="tel">
유효성을 체크하지 않으며 나라마다 표준이 다르기 때문에 자동으로 "-"를 넣어주지 않는다.
유효성 체크는 하지 않지만 모바일 기기에서 입력할 때 자동으로 숫자 패드가 나타난다.
<form id="frm" action="action.jsp">
<p>전화번호 입력 :</p>
<div><input type="tel" id="usertel" name="usertel"></div>
<div><input type="submit" value="전송"></div>
</form>
3-13. <input type="number">
숫자를 입력 받기 위한 값이다. 텍스트는 아예 입력이 되지 않으며 숫자를 입력하는 순간에 오른 쪽 끝에 스핀 컨트롤이 생긴다. 화살표를 클릭해서 값을 올리거나 내릴 수 있다.
<form id="frm" action="action.jsp">
<p>숫자입력 입력 :</p>
<div><input type="number" id="usernumber" name="usernumber"></div>
<div><input type="submit" value="전송"></div>
</form>
type="number"는 유효성 체크를 위해 범위 입력을 받아야 하는 경우가 있다.
min, max, step, value 속성으로 범위와 초기값, 증가 값을 셋팅할 수 있다. 범위는 min, max로 / 증가 값은 step 으로 스핀 컨트롤을 클릭으로 한다. 그리고 화면에 나타나는 초기값은 value에 입력하면 된다.
<form id="frm" action="action.jsp">
<p>숫자입력 :</p>
<div><input type="number" id="usernumber" name="usernumber" value="100" step="10" min="0" max="1000"></div>
<div><input type="submit" value="전송"></div>
</form>
3-14. <input type="range">
범위 내에 있는 숫자를 슬라이드로 입력 할 수 있는 형태로 만들어준다. 슬라이드로 선택한 숫자는 텍스트로 표현되지 않으므로 javascript를 이용해서 포시해야한다. 그리고 범위와 증가 값은 number 유형과 통일하다.
min과 max를 이용해서 범위를 지정하고 step으로 증가 값을 세팅하면 된다.
<form id="frm" action="action.jsp">
<p>범위 입력 :</p>
<div><input type="range" id="userrange" name="userrange" value="100" step="10" min="0" max="1000"></div>
<div><input type="submit" value="전송"></div>
</form>
3-15. <input type="date">
날짜 형식을 입력 받을 수 있고 날짜를 편리하게 선택할 수 있도록 달력창이 뜬다. 화면 로딩될 때 나타나는 날짜 값을 value 속성에 입력하면 된다.
4. input 요소의 속성들
4-1. disabled 속성
이 속성은 모든 공통 속성 타입으로 input 요소 뿐 아니라 모든 폼 요소들이 사용 가능한 속성이다.
이 속성을 사용하면 해당 폼 요소를 비활성화 시켜버린다.
<!-- 엄격한 표기 방식 (XHTML) -->
<input type="text" value="nothing" disabled="disabled" />
<!-- 느슨한 표기 방식 (HTML) -->
<input type="text" value="nothing" disabled >
4-2. readonly 속성
텍스트 정보를 담는 type="text" / textarea 요소에 사용되는 속성이다.
이 속성을 사용하면 폼 요소안의 텍스트를 수정할 수 없고 오직 읽을 수 만 있다.
<input type="text" value="수정 안되는 input 텍스트" readonly="readonly" />
4-3. size 속성
type="text"에만 해당하는 속성으로 해당 요소의 넓이를 지정한며 css로도 처리 가능하다.
textarea는 cols/rows를 이용하여 지정 가능하다.
4-4. maxlength 속성
size 속성과 마찬가지로 type="text"에서만 사용되는 속성이다.
글자 수 제한으로 속성 값으로 지정된 숫자 이상은 넣을 수 없도록 만들어준다.
<input type="text" maxlength="4" />
4-5. checked속성
이 속성은 type="checkbox" 와 type="radio" 에서만 쓸 수 있는 속성으로, 기본 값으로 선택되도록 보여줍니다.
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] 폼(form)의 이해 / 데이터 처리 과정 공부하기 (0) | 2020.06.16 |
|---|---|
| [HTML] Form, label, Fieldset, Legend 태그 속성 및 개념 잡아보기 (0) | 2020.06.16 |
| [HTML] form 태그 사용하는 다양한 방법 / 개념잡기 (0) | 2020.06.16 |
| [HTML] <a>, <button>, <input> 용도맞게 사용하기 (0) | 2020.06.16 |
| [CSS] 브라우저 기본값 초기화 리셋 reset.css 개념 잡기 (0) | 2020.06.16 |