[HTML/CSS] 입력 양식 관련 태그 input

input

사용자에게 값을 입력 받을수 있는 텍스트상자, 체크박스 등을 만드는 태그

 

input type="text"

한줄 텍스트를 입력할 수 있는 텍스트 상자(기본값)

cf. label 태그에 for="inputId"를 추가하므로써, 라벨의 '아이디'라는 글자를 클릭할 경우

    커서가 required id=inputId로 연결된 input 입력칸으로 연결된다

cf. required 속성이 입력된 경우 필수값이므로 아이디를 입력하지 않으면 경고창이 뜬다

cf. placeholder 속성 입력 시 사용자가 입력을 제대로 할수 있도록 간단한 도움말을 명시한다

<label for="inputId">아이디</label>
<input type="text" name="userId" placeholder="아이디를 입력하세요",
    maxlength="12" required id="inputId">

 

input type="password"

입력값을 마스킹 처리해주는 텍스트상자

<label for="">비밀번호</label>
<input type="password" name="userPw" placeholder="특수문자+영문+숫자10자리",
    maxlength="10">

 

input type="search / url / email"

일반텍스트상자와 유사한 모습이지만 각각의 정보에 맞게 세분화된 기능을 제공한다

홈페이지 : url 필수

email : @ 값 필수

검색 : <input type="search" placeholder="검색어 입력"><br>
홈페이지 : <input type="url" value="http://"><br>
이메일 : <input type="email">

 

input type="radio / checkbox"

radio : 제시한 값중 오로지 한개만 선택할 경우 사용

         name 속성값이 같아야 하나의 그룹으로 묶인다

         제출(submit)시 현재 선택된(checked) 데이터(value)가 서버로 넘어간다

 

checkbox : 제시한 값중 여러개 선택이 가능한 경우 사용

               현재 선택된 checked 값의 value들이 넘어가기 때문에 value 값을 명시해야한다

 

submit : 제출버튼, 서버로 폼내 데이터를 전송해주는 역할

 

* id는 폼내 중복 불가능하며, name은 폼내 중복가능(그룹)

  label for ="id"를 사용하여 input과 연결

성별 :
<input type="radio" id="radioX" name="gender" value="X" checked><label for="radioX">선택안함</label>
<input type="radio" id="radioF" name="gender" value="F"><label for="radioF">여성</label>
<input type="radio" id="radioM" name="gender" value="M"><label for="radioM">남성</label>
<br><br>

취미 :
<input type="checkbox" id="sleep" name="hobby" value="sleep">
<label for="sleep">잠자기</label>
<input type="checkbox" id="listensong" name="hobby" value="listensong">
<label for="listensong">노래듣기</label>
<input type="checkbox" id="watchvideo" name="hobby" value="watchvideo">
<label for="watchvideo">동영상보기</label>
<br><br>

<input type="submit" value="전송">

 

input type="number / range"

number : 숫자 값만 입력 가능한 텍스트 상자, 스핀박스가 추가되어 위아래 화살표 조정버튼으로 조정 가능

range : 슬라이드바를 통해 숫자 지정

<input type="number" name="name" min="최소값" max="최대값" step="조정단위" value="기본값">

<input type="range" name="name" min="최소값" max="최대값" step="조정단위">

<form action="test.do">
    <h3>type="number"</h3>
    수량 : <input type="number" name="count" min="0" max="20" step="3" value="0">

    <h3>type="range"</h3>
    점수 : <input type="range" name="score" min="0" max="100" step="10">

    <input type="submit" value="전송">

    <input type="reset"> <!--초기화버튼-->
</form>

 

input type="date / month / week / time / datetime-local"

date : 년, 월, 일을 입력받는 날짜 상자

month : 년, 월을 입력받는 날짜 상자

week : 년과 해당년도의 몇번째 주인지 입력받는 날짜 상자

time : 오전/오후 시간을 입력받는 날짜 상자

datetime-local : 년, 월, 일, 시간을 입력받는 날짜 상자

<form action="test.do">
    date : <input type="date" name="dateIn"> <br>

    month : <input type="month" name="monthIn"> <br>

    week : <input type="week" name="weekIn"> <br>

    time : <input type="time" name="timeIn"> <br>

    datetime-local : <input type="datetime-local" name="datetime-localIn"> <br>

    <button type="submit">제출</button>
</form>

 

input type="color / file / hidden"

color : 색상을 선택할 수 있는 타입

file : 파일을 첨부할 수 있는 타입

hidden : 사용자에게 보여주지 않고 데이터를 넘김, 사용자 UI에 노출되지 않음

색상선택 : <input type="color">
<br><br>
파일선택 : <input type="file">
<br><br>
히든 : <input type="hidden" name="hidden">

 

input type="button / submit / reset"

button type="submit / reset / button"

 

<input type="button" value="버튼">
<input type="submit" value="제출">
<input type="reset" value="리셋">

<br><br>
<h3>button type=submit/reset/button</h3>
<button type="submit">submit버튼</button>
<button type="reset">reset버튼</button>
<button type="button">button버튼</button>

<!-- form태그 안에서 button타입을 지정하지 않으면 기본값인 submit 타입이 된다. -->
<button>그냥버튼</button>