[HTML] input tag 총정리

input tag의 기본 형식

<input type = "유형" id="id값" [속성="속성 값"]>

 

 

hidden	사용자 안보임	text	텍스트 박스	search	검색 박스
tel	전화번호 박스	url	url 주소 박스	email	이메일 박스
password	비밀번호(***)	datetime	국제 표준시	date	연/월/일 박스
month	연/월 박스	week	연/주 박스	time	시/분/초 박스
number	숫자 조절 박스	range	슬라이드 막대	color	색상표
checkbox	체크박스	radio	라디오 버튼	file	파일 첨부
submit	전송 버튼	reset	리셋 버튼	button	버튼

 

See the Pen <input> tag by hbkuk (@hbkuk) on CodePen.

 

input tag의 사용할 수 있는 속성(아래 사이트 참고)

코딩교육 티씨피스쿨

---

1. hidden

 - 화면상에 표시되지 않지만 서버에는 전송

<input type="hiedden" value="데이터">

 

2. text

 - 빈 텍스트 박스

<input type="text" size="50" maxlength="10" value="초기값" readonly>
<input type="text" size="50" maxlength="10" placeholder="값 입력" >

 

3. search

 - 검색 상자, 전체 삭제 가능

<input type="search">

 

4. tel

 - 전화번호 입력, 통화 연결 기능 제공

<input type="search">

 

5. url

 - 웹 주소 입력

<input type="url">

 

6. email

 - 이메일 입력, 브라우저에서 이메일 형식인지(@) 확인 기능 제공

<input type="email">

 

7. password

 - 패스워드 입력, 화면에는 ***로 표시되지만, 암호화는 아님.

<input type="password">

 

8. datetme, date, month, week, time

 - 시간 관련 유형

<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">

 

9. number

 - 숫자 조절 화살표 제공

<input type="number" min="0" max="50" value="10" step="2">

 

10. range

 - 슬라이드 조절 막대바 제공

<input type="range" min="0" max="254" value="122">

 

11. color

<input type="color" value="#ff00ff">

 

12. radio, checkbox

 - checkbox: 중복선택 O

 - radio: 중복선택 X

<!-- checked는 기본으로 선택되어 있는 명령어 -->
            <input type="checkbox" checked>사과</br></br>
            <input type="checkbox">수박</br></br>
            <input type="checkbox">딸기</br></br>
            <input type="checkbox">참외</br></br>
            
            
<!-- radio + 같은 name으로 지정하면 중복선택이 가능함. -->
            <input type="radio" name="r">사과</br></br>
            <input type="radio" name="r" checked>수박</br></br>
            <input type="radio" name="r">딸기</br></br>
            <input type="radio" name="r">참외</br></br>

 

13. file

 -  파일 전송 가능

<input type="file">

14. submit

 - 제출 기능

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

 

 - 추가 사용 예1

        <form action="test.jsp" method="get">
            데이터 1<input type="text" name="data1"><br>
            데이터 2<input type="text" name="data2"><br>
            <input type="submit" value="전송"><br>
        </form>

 

 - 추가 사용 예2

        <form action="https://search.daum.net/search" method="get">
            <input type="hidden" name="w" value="tot">
            <input type="hidden" name="DA" value="YZR">           
            검색 <input type="text" name="q"><br><br>
            <input type="submit" value="전송"><br>
        </form>

 - 추가 사용 예3

        <form action="https://search.naver.com/search.naver" method="get">
            검색 <input type="text" name="query"><br><br>
            <input type="submit" value="전송"><br>
        </form>

 

15. reset

 - 사용자가 입력한 모든 정보 삭제, form의 내용을 전체 삭제 기능 제공

<input type="reset">

 

16. button

 - 버튼 클릭 시 실행되는 함수를 지정 가능

<!-- "onclick" 속성은 자바로 작성 -->

<input type="button" value="새 탭 열기" onclick="window.open()">