[HTML] Chapter 08. 사용자의 데이터 입력

1. 입력 값에 대해서 

웹 페이지는 정보를 상호 교환하며 화면을 표시하는 기능이다.

검색 부터 로그인까지 웹의 기능의 구현에는 사용자가 입력해야할 정보가 필요하다.

 

웹 페이지의 기능과 다양한 플랫폼은 사용자로부터 데이터를 받고, 해당 데이터를 통해 사용자가 원하는 정보를 처리하는 일련의 과정을 가진다.

div가 화면 구현에 필요한 중요한 기능이라면, 입력 값을 받는 것은 기능 구현에 매우 중요한 기능이라고 할 수 있다.  

 

2. 사용자가 값을 입력하는 기능: <input>

<input> 태그는 사용자가 웹 페이지에 정보를 전달할 때 사용하는 태그이다.

기본적으로 하얀 박스로 데이터 입력이 가능하도록 하는데 type에 따라 다양한 모습으로 구현이 가능하다.

현재 데이터 입력 및 데이터 베이스에 대한 지식이 없기 때문에 입력받은 정보를 활용하여 구현하는 단계는 아니지만, 해당 항목으로 데이터 입력 및 수집이 가능한 점은 알아둘 필요가 있다. 

 

2.1 안내문 기능: placeholder=

안내문 기능이므로 실제 데이터 할당과 전송이 이루어지지 않는다.

때문에 사용자가 데이터를 입력하면 해당 표시가 사라진다.

 

기본 형태: <input placeholder=" "> 

 

2.2. 선택하는 박스를 만드는 type="checkbox"

checkbox 는 사용자로부터 받는 데이터를 클릭을 통한 데이터 수집을 위해 사용된다.

체크가 가능한 형태의 박스로 정보가 수정된다.

checked 를 해당 타입 뒤에 입력하면 체크가 완료된 상태로 표시된다. 

 

기본 형태: <input type="checkbox" checked>

 

2.3. 지정한 군집 중 1개만 선택 가능한 박스를 만드는 type="radio

라디에이션의 줄임말로 소리를 전달하는 radio를 말하는 것이 아니다.

radio는 다수의 항목 중에 1개만 선택을 원하는 경우 에 사용한다.

name으로 군집을 지정할 수 있고 해당 군집 구성 요소 중에 1개만 선택이 가능하다.

또한 name을 설정하면 동일 군집 중에 1개만 선택이 가능하도록 구현할 수 있다. 

 

기본 형태: <input type="radio">// <input type="radio" name="fruits">

 

2.4. 숫자를 입력하는 데이터를 만드는 type="number”

number은 숫자를 입력하는 데이터 입력창을 생성한다.

음수 및 양수 표현이 가능하고, 필요하다면 최대 및 최저 값을 지정할 수 있다.

최저값 min ~ 최대값 max 으로 설정이 가능하다.

또한, 옆에표시되는 위아래 토글의 단계도 설정이 가능하다. 이는 step 을 이용한다.

 

기본 형태: <input type="number" min="5" max="15" step="1">

 

2.5. 선택 범위를 만드는 type="range” 

마우스로 값을 설정할 수 있는 기능을 구현한다.

number과 마찬가지로 min과 max의 값을 지정할 수 있으며, value로 초기값을 지정한다.

 

기본 형태: <input type=range min=0 max=10 value="1">

 

 

 2.6. 날짜 정보를 선택하는 type="date”

날짜를 입력할 수 있는 태그이다.

년.월.일.의 날짜를 표현하거나 ‘주간’ 혹은 ‘월간’으로 입력값을 수정할 수 있다.

현재 시간이나 정보 또한 구현이 가능하기 때문에 웹 사이트 구현에 자주 사용되며, 주로 날짜 선택을 통한 옵션이나 회원가입 페이지에 사용된다.

 

기본 형태: <input type = "date">

 

type = "date" : <input type="date" value=1992-10-02>

type = "month" : <input type="month">

type = "week" : <input type="week”.>

type = "time" : <input type="time">

type = "datetime-local" : <input type="datetime-local">

 

2.7. 파일을 업로드하는 type="file”

파일 업로드를 위한 기능이다.

다만, html은 모양을 만드는 기능이므로 해당 태그만으로는 파일 업로드를 구현하지는 못한다. 

파일 업로드에는 파일 저장 매체, 경로 등 다양한 정보가 필요하다. 

 

기본 형태: <input type="file">

 

2.8. 입력된 데이터를 사용자에게 감추기위한 타입

디자인 요소 혹은 사용자에게 공개하지 않을 정보를 전송할 때 사용한다.

사용자에게 공개할 필요가 없는 데이터의 지정에 사용한다.

 

기본 형태: <input type="hidden"> 

 

2.9. 입력한 데이터를 지정한 페이지로 전송하기 위한 타입 

input으로 입력한 데이터를 지정한 페이지나 Server에 전송하기 위한 타입이다.

해당 타입이 없으면 데이터를 전송하는 것이 불가능하기 때문에 반드시 사용이 필요하며 자세한 내용과 구동 방식은 추후 9 챕터를 참고하자.

또한 value 값을 지정하면 default 값인 ‘제출’ 외의 정보로 지정이 가능하다. 

 

기본 형태: <input type="submit"> 

 

2.10. 입력한 데이터를 초기화 하기 위한 타입 

입력한 데이터의 정보를 초기화할 필요가 있다면, type을 통해 reset을 지정하면 된다.

버튼 혹은 클릭이 가능한 형태로 나오며 누르면 선택한 값이 초기화된다.

value 값을 지정하면 default 값인 ‘초기화’ 외의 정보로 지정이 가능하다. 

 

기본 형태: <input type="reset"> 

 

2.11. 색상을 입력받을 때 사용하는 타입 

input을 통해 색상 정보를 입력받고 싶은 경우에 사용하는 타입으로 그림판의 색상 지정표와 동일한 화면 구성을 통해 화면 선택이 가능하다. 

 

기본 형태: <input type="color"> 

 

 

2.12. value=

input에 미리 데이터가 입력되도록 하는 기능이며, 개발자가 지정한 값이 삽입된다.

사용자 편의를 위해 입력받아야하는 데이터의 서식이나 정보를 표현하기도 한다.

일부 타입에서는 기초 값을 설정하는 용도로 사용하며 입력한 정보로 데이터 전송이 가능한 값이다. (이는 placeholder와 상이하다.)

 

기본 형태: <input value=" "> 

 

2.13. name=

해당 태그의 이름을 지정한다.

다른 태그와 구별되는 id와 유사한 개념이나 name에 입력한 “사용자 지정”값이 다른 태그와 겹쳐 사용이 가능하다.

물론 데이터를 추출하는 동작이 필요하다면 이를 구별짓는 것이 좋다. 

 

기본 형태: <input name=" "> 

 

2.14. 정규표현 양식 지정

정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받는다.

형식이 일치하지 않으면 submit가 진행되지 않기 때문에 특정 형식으로 정보를 추출할 때 사용한다.

title을 입력하면 제출할 경우, 요청 양식이 표현된다. 

 

주의할 점은 pattern에 입력하는 데이터의 형식과 일치하는 것이기 때문에 임의 값을 입력하면 해당 값으로 default된다.

때문에 형식으로 작성할 필요가 있다. 

 

기본 형태: <input type=”text” pattern=”\d{6}-\d{7}”> 

 

\d는 숫자, {}는 입력 자리수를 말한다. 위의 예시라면 000000-000000 (0은 0-9)입력필요

 

정규표현 양식 지정의 대표적인 형식

 

이름	[a-zA-z]{4,10}
전화번호	0\d{1,2}\-\d{3,4}\-\d{4}
주민등록번호	\d{6}\-[1-4]\d{6}
이메일	^[a-zA-Z0-9]+@[a-zA-Z0-9]+$

 

2.15. 필수 입력 데이터 지정 

required를 사용하면 해당 양식이 submit 되기 위해서 반드시 입력할 필요가 있는 데이터를 지정할 수 있다.

checkbox의 checked와 마찬가지로 type이나 name의 설정이 아닌 독립적으로 지정이 가능하다. 

 

기본 형태: <input type="text" required>

 

2.16. 자동으로 포커스 이동

autofocus를 지정하면 해당 input 태그로 커서가 자동 설정된다.

복수로 지정하면 가장 먼저 입력된 포커스 값으로 고정된다. 

 

기본 형태: <input type="text" autofocus>

 

2.17. 글자 수 제한

maxlength를 추가하면 해당 input 양식에 입력 가능한 최대 글자 수를 지정할 수 있다.

 

기본 형태: <input type="text" maxlength=”0”>

 

2.18. 읽기 전용 데이터

readonly를 추가하면 해당 input 양식에 데이터를 입력할 수 없다.

사이트 기입 예시 등을 만들 때 사용할 수 있다.

 

기본 형태: <input type="text" readonly>

 

3. 데이터 분류 및 영역 확장: <label for=””></label>

label을 이용하면 id를 중심으로 필요한 정보를 분류할 수 있다.

디자인에서 모양 차이를 구현하지 않으나 후에 웹 페이지의 데이터 분류와 추적을 위해서 사용한다.

다만 CSS를 통한 모양 구현이 복잡해진다. 

 

때문에 for을 사용하여 해당 lable이 어떤 항목을 위해 존재하는지 표시하고 label을 분류한다.

이를 label의 선택 영역 확장이라고 하며, label로 엮인 항목의 일부를 선택하여도 input 창이 선택된다는 것이다. 

 

<label for="uid">아이디 : </label>
<input id="uid" type="text"><br>

<label for="pw">비밀번호 : </label>
<input id="pw" type="password">

 

위의 코드로 확인하였을 때, input 영역은 화아트 박스만이 아니라 아이디: 라는 글자까지 동일한 영역으로 확장된 것을 확인할 수 있다.

직접 구동해보면 아이디: 를 눌러도 input으로 입력을 요구하는 부분이 활성화 되는 것이 확인된다. 

 

4. 특정 영역을 감싸는 박스 생성: <fieldset></fieldset>

해당 태그는 특정 영역을 감싸는 박스를 생성하는 태그이다.

일정 영역을 지정할 때 사용하며, 특별한 타입의 지정이 없다면 네개의 변이 1px에 검은 색의 직선인 상자가 생성된다. 

<fieldset></fieldset>으로 사용한다.

만약 해당 태그를 사용한 상자에 제목을 삽입하고 싶다면 <legend></legend>로 사용하여 입력할 수 있다.

 

기본 형태: <fieldset></fieldset>/ <fieldset><legend>제목</legend></fieldset>

 

5. 여러 줄 글상자

여러 줄을 입력받는 태그이다. 속성은 rows와 cols가 있으며, rows는 줄을, cols는 한 줄에 입력될 크기를 지정한다. 

 

 

<textarea 
name = “comment” 
cols = “50” 
rows = “5” 
placeholder=”가입인사를 남겨주세요.”>

</textarea>

 

6. 데이터 입력의 목록 태그

6.1. 항목을 선택할 수 있는 태그: <select></select>

해당 태그를 사용하면 개발자가 지정한 데이터의 목록중에 사용자가 선택하는 방식으로 데이터를 분류할 수 있다.

속성은 size와 multiple을 지정할 수 있으며, size는 최대로 보이게 하는 크기, multiple은 다수 선택 가능 여부이다.

하위 항목은 <option></option>을 통해 지정한다. 

 

지역선택 (size, multiple 속성 추가)

<select name = "city2" size = "5" multiple>
  <option value = "seongnam-si">성남시</option>
  <option value = "suwon-si">수원시</option>
  <option value = "yongin-si">용인시</option>
  <option value = "anyang-si">안양시</option>
  <option value = "gwacheon-si">과천시</option>
  <option value = "hanam-si">과천시</option>  
</select>

 

 

6.2. 데이터 선택: <optgroup></optgroup>

<optgroup></optgroup>을 포함하면 해당 <option></option>의 대분류를 지정할 수 있다.

예시와 같이 송파구, 강남구, 서초구, 중구 등이 ‘서울’에 포함된 모양을 구현할 수 있다는 것이다. 

 

지역선택 (optgroup 태그 포함)

<select name = "city1">
  <optgroup label = "서울">
    <option value = "songpa-gu">송파구</option>
    <option value = "gangnam-gu">강남구</option>
    <option value = "seocho-gu">서초구</option>
    <option value = "junggu-gu">중구</option>
  </optgroup>

  <optgroup label = "경기도">
    <option value = "seongnam-si">성남시</option>
    <option value = "suwon-si">수원시</option>
    <option value = "yongin-si">용인시</option>
    <option value = "anyang-si">안양시</option>
  </optgroup>         
</select>

 

6.3. <option></option>의 입력 값 후보 <datalist>

텍스트 상자에 입력 값 후보 목록을 지정할 경우에 사용한다.

아래의 코드와 이미지를 참고하여 사용법을 익혀두자. HTML5만 구동된다.

브라우저 별로 데이터 정보가 다르므로 잘 사용하지 않는다.

 

<input type=”text” name=”browser” list=”browser”>
<datalist id=”browser”>
  <option value = “크롬”>Google</option>
  <option value = “파이어폭스”>Mozilla</option>
  <option value = “사파리”>Apple</option>
  <option value = “익스플로러”>Microsoft</option>
</datalist>