[HTML]입력양식_<input>

사용자가 데이터를 입력 할 수있는 입력 필드를 지정할 수 있으며

type에 따라 다양한 입력 방식을 선택할 수 있다.

(*타입에 대한 설명이 중심이라 <form> 태그, <input type="submit"> 생략)

 

<form>
    <input type="value" name="입력 폼 변수">
    <br/>
    <input type="submit" name="submit">
    <input type="reset" name="reset">
</form>

 

※ 이 글에 적힌 type list ※

submit / reset	text / password / search	tel / number / email / url
<textarea>	<datalist>	radio / checkbox
<button>	날짜, 시간 양식	color / range
<meta> / <progress>	<select>	입력양식 주요 속성

 

 

input type에 따른 구분

(1) 제출 / 초기화 양식

입력 양식에 기본적으로 들어가는 것. 데이터를 전송하기 위해.

-[ submit ]

<input type="submit" value="버튼 이름">

입력된 것을 제출하는 것. 이를 처리하기 위한 스크립트가 필요하고 <form>의 action 속성에 지정된다.

지정하지 않으면 현재 페이지.

 

-[ reset ]

<input type="reset" value="버튼 이름">

입력한 데이터를 모두 초기화하는 것.

 

 

(2) text / password 양식

- [text ] / [ password ]

<p>ID : <input type="text" name="ID" size="15" required></p>
<p>PW : <input type="password" name="psw" size="15" placeholder="비밀번호" required></p>

password : 사용자가 입력한 문자를 보이지 않게 처리

placeholder : 도움말

required : 사용자가 입력해야 전송/제출할 수 있음을 지정.

 

-[ search ]

<input type="search" name="~">
             <!--사용자가 쉽게 기존 내용을 지울 수 있도록 텍스트 입력창에 리셋(x)-->

 

(3) number / email / url 양식

<input type="tel" name="" >
<input type="number" name="~" min="1" max="149">
                              <!--지정한 최소값과 최대값 사이의 숫자만 입력 가능-->
<input type="email" name="~">
                    <!--사용자가 이메일 형식대로 입력했는지 확인하는 최소한의 안전장치-->
<input type="url" name="~">
                  <!--사용자가 url 형식으로 입력해야 함. http://-->

└type="tel" : 모바일에서 입력창 누르니까 숫자패드 뜸.

 

(4) <textarea>

<form>
    <textarea row="5" cols="50">텍스트를 작성하는 공간</textarea>
</form>       <!--5행, 50개 문자가 들어갈 정도의 열 크기-->

텍스트 입력 공간의 크기(rows, cols) 지정할 수 있다.

 

(5) <datalist>

텍스트 입력 시 자동완성 기능 제공. 미리 설정해둬야 함.

<form>
    <label>전공 분야 입력</label>
    <input type="text" list="majorlist" name="major">
    <datalist id="majorlist">
    	<option value="Software">소프트웨어</option>
        <option value="Robot">로봇</option>
        <option value="System">시스템</option>
        <option value="Service">서비스</option>
        <option value="Education">교육</option>
    </datalist> <!--내용을 비우고 새로 쓸 수 있음. 틀은 놔두고-->
</form>

<input> 태그의 list 값과 <datalist> 태그의 id 값이 같아야 함.

 

(6) radio / checkbox 양식

-radio : 여러 항목 중 하나만 선택 가능

-checkbox : 여러 항목 복수 선택 가능

<form>
    <h3>성별</h3>
    <input type="radio" name="sex" value="male" checked>남자
    <input type="radio" name="sex" value="female" >여자
    <h3>학년</h3><!--radio : 여러 항목 중 하나만 선택 가능-->
    <input type="radio" name="year" value="1" checked>1학년
    <input type="radio" name="year" value="2">2학년
    <input type="radio" name="year" value="3">3학년
    <h3>관심 과목</h3><!--여러 항목 복수 선택 가능-->
    <input type="checkbox" name="major" value="la">언어
    <input type="checkbox" name="major" value="math">수학
    <input type="checkbox" name="major" value="society">사회탐구
    <input type="checkbox" name="major" value="art">미술
    <input type="checkbox" name="major" value="sport">체육
</form>

가시적으로 보이는 것은 아니지만 name 속성이 같은 것끼리 묶임.

 

(+) <label> 태그와 선택 양식

<label for="a1">와 <input type="" name="" id="a1">처럼 명시적으로 묶어주면

체크박스 클릭 범위 증가 이점.

 

-이용 예시

<form name="" action="" method="">  <!-- 따로 쓸 경우 -->
    <label for="user_tel"> 사용자 전화번호 </label>
    <input type="tel" id="user_tel">
</form>

<form  name="" action="" method="">  <!-- 안에 쓸 경우 -->
    <label><input type="radio" name="sex" value="female">여성</label>
    <label><input type="radio" name="sex" value="male">남성</label>
</form>

└input 하나당 라벨 하나씩 써줌

 

(7) button 양식

-<button>태그

<button type="button" name="" onclick="alert('클릭')"> CLICK </button>
                                                 <!--버튼 이름, 이미지로 대체 가능-->

버튼을 이미지로 할 경우, 이미지 최소 3개(기본, 눌렀을 때, 누른 후)

 

-<input type="button">

<input type="button" name="" onclick="alert('클릭2')" value="CLICK2">
                                                  <!--value="버튼 이름"-->

 

버튼에 (?)가 없어서 일일이 자바스크립트 넣어줘야 함. (아마도 자체 내장된 기능같은 거인듯)

 

※ on~ : 이벤트 관련. 대표적인 것이 onclick

onclick="alert('내용')"
           // 자바스크립트 실행문

 

(8) 날짜, 시간 양식

<input type="date" name=""><!--년 월 일-->

<!--최소값과 최대값 지정 가능. 지정된 범위 내의 날짜만 선택 또는 입력 가능-->
<input type="date" name"" min="2022-01-01" max="2022-12-31">

<input type="month" name=""><!--년 월-->

<input type="week" name=""><!--년 주-->

<input type="tiem" name=""><!--시간-->

<input type="datetime-local" name=""><!--년 월 일 시간-->

 

(9) 색상 선택, 범위 지정 양식

-색상을 선택할 수 있는 양식

<input type="color" name="~" value="#000000">
                                <!--기본값 설정-->

 

-범위를 지정할 수 있는 양식.

실시간 처리하려면 자바스크립트 이용

<input type="range" name="~" min="0" max="100">
                        <!--최소값과 최대값 지정-->

 

(10) 막대그래프 양식

각 데이터값이 실시간으로 변하게 하려면 자바스크립트 이용

-<meter> 태그 ex) 학습량 그래프

<meter min="0" max="100" optimum="권장값(기대값)" value="실제값"> </meter>
<meter low="0.3" high="0.5" vlaue="실제값"></meter>
              <!--optimum과 value 값의 차이에 따라 색 변동-->

 

-<progress> 태그 ex) 작업 진행률

<progress value="35" max="100" title="~"></progress><!--정수-->
<progress value="0.6" max="1"></progress> <!--백분율 단위-->

 

(11) <select>

목록 중 하나를 선택하는 양식

-기본

<form>
    <select name="subjects">
        <option value="1" selected>HTML</option>
        <option value="2">CSS</option>
        <option value="3">JavaScript</option>
        <option value="4">Jquery</option>
    </select> <!--데이터가 전송될 때는 value값으로 넘어감.-->
</form>

 

-여러 개 선택할 수 있게 하는 multiple 속성

<form>                               <!--여러 개 선택 가능. 그러나 ctrl 키다운 상태로 클릭-->
    <select name="subjects" size="2" multiple>
        <option value="1" selected>HTML</option>
        <option value="2">CSS</option>
        <option value="3">JavaScript</option>
        <option value="4">Jquery</option>
    </select>
</form>

size="개수"는 화면에 보여지는 목록 개수.

size="2"

항목 위에서 마우스 스크롤하면 안 보이는 항목을 볼 수 있음.

 

-항목을 그룹화 하는 <optgroup> 태그

<form>
    <label>좋아하는 전공 과목은?</label>
    <select name="major">         <!--이름표이므로 선택 x-->
        <optgroup label="computer"><!--그룹1-->
            <option>Software</option>
            <option>Robot</option>
            <option>Sysytem</option>
        </optgroup>
        <optgroup label="language"><!--그룹2-->
            <option>Korea</option>
            <option>English</option>
            <option>Germany</option>
        </optgroup>
    </select>
</form>

 

 

(12) 입력양식 주요 속성

<input type="속성" name="변수" size="크기" placeholder>
                                  <!--필요한 속성을 적어주면 된다-->
<input type="속성" name="변수" size="크기" autocomplete="on">
                                       <!--기본값 off. 자동완성기능 사용하려면 on-->
<input type="속성" name="변수" size="크기" spellcheck="true">
                                           <!--오타 체크 기능 사용-->

종류와 의미

readonly	읽기 전용. 텍스트 상자에 쓰기 제한, 오직 읽기만 가능
disabled	텍스트 상자 비활성화. 데이터 전송 시 제외. (submit 후 url 확인)
autocomplete	자동완성기능
autofocus	현재 페이지 로드될 때 처음으로 입력하고 하는 입력 폼
placeholder	현재 폼에 입력해야 하는 텍스트를 희미하게 보여줌. 도움말같은 거.
required	필수 입력 속성 지정
spellcheck	입력되는 문장의 오타를 실시간 점검