INPUT 태그의 TYPE 과 Attribute(속성) 종류

걍 혹시나 해서 메모하는 input 태그들 종류 입니다.

ahen 

1. radio

    <input type="radio" id="genderChoice1" name="gender" value="male" checked="checked">
    <label for="genderChoice1">Male</label>

    <input type="radio" id="genderChoice2" name="gender" value="female">
    <label for="genderChoice2">Female</label>

    <input type="radio" id="genderChoice3" name="gender" value="other">
    <label for="genderChoice3">Other</label>

name을 동일하게 주어야 그룹으로 지정되어 단일 선택 가능, 

checked 속성을 이용해 체크 상태를 조정 가능.                  - 출처

2. checkbox

<input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS" checked="checked">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인

각각의 태그 name은 같을 필요 없지만, 

name을 동일하게 주면 HttpServletRequest 클래스의 getParameterValues("태그 이름") 메소드를 이용하여 

배열로 한번에 리턴 가능합니다.

이 경우, check 되지 않은 값은 가지고 오지 않습니다. (3개 중 2개 체크하고 전달하면 Array의 length 값은 2).

역시 checked="checked" 속성을 이용하여 선택 상태 조정 가능

3. select

<select name="selectTag">                                 

        <option value="전달하려는 값"> 보이는 입력값</option>   

</select>                                

<select> 태그 내부에 option 태그를 넣어서 리스트를 추가할 수 있습니다.

4. textarea

text input은 한줄로만 입력이 가능하다면, textarea는 안에서 Enter키를 사용할 수 있습니다.

5. text

input 태그의 기본값, type을 입력하지 않으면 text input이 됩니다.

6. button/reset/submit

<button type="button" id="button1">

<button type="reset" id="button2">

<button type="submit" id="button3">

기본적으로 button 태그의 기본 값은 버튼을 가진 form을 전송하는 submit 입니다.

reset은 해당 form의 input 값에 입력된 모든 정보를 초기화 한다.

button 은 아무 이벤트가 없다, 즉 작동하지 않는 button을 생성하여, <script>에서 조정이 가능합니다.

---

귀찮아서 모두 만들긴 힘들다고 생각되는 관계로...

HTML 태그의 교과서 격인 W3School의 힘을 빌립니다.   

출처: https://www.w3schools.com/html/html_form_input_types.asp   

Input Type	기능
password	입력값이 ****로 보여짐
color	Color-Picker를 이용해 색깔 선택 가능 브라우저마다 나오는 Color-Picker에는 차이가 있음
month	년도와 월을 함께 선택할 수 있는 picker를 생성
week	년도와 주를 선택할 수 있는 picker를 생성
date	날짜를 선택할 수 있는 date-picker를 생성
datetime-local	날짜와 시간을 선택할 수 있는 picker를 생성
email	기본적인 @와 주소규칙을 확인해주는 input 태그 생성,  스마트폰에 따라 자동으로 키보드에 .com을 생성
url	브라우저에 따라 자동으로 url 규칙을 확인,  스마트폰에 따라 .com 버튼을 활성화
number	숫자만 입력 가능한 input 태그 생성,  min과 max 속성으로 입력값 제한 가능
range	놀라운 태그였지만, 말로 설명하기 힘드므로 클릭해보자... -> 여기

그리고 input에 사용 가능한 기본적인 속성들

속성 (Attribute)	기능
disabled	선택이나 수정이 불가능한 상태로 지정합니다.
max min	number 타입에서 최대값/최소값을 지정 합니다,  setp속성과 병행 가능
maxlength	입력값의 글자 수 최대 길이를 지정합니다
pattern	입력값에 패턴을 줄 수 있는데 사실 잘 이해가 안갑니다...
readonly	키보드로 수정될수 없게 속성을 부여합니다,  ( <script>에서 수정가능 )
required	반드시 입력되어야 form 전송을 가능하게 합니다.
size	특정 길이의 값을 입력하도록 설정 가능합니다
step	number 타입에 간격(interval) 지정 가능합니다
title	마우스를 올렸을 때 나타날 메세지를 지정합니다
value	전송할 입력값을 지정합니다

알아보기 쉽고 이쁘게 포스팅 하는 분들 존경합니다...