13 입력상자 <input>의 요소 1

---

<input>

 

HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

 

HTML에서 사용할 수 있는 대표적인 input 요소들을 알아보자 o(*￣▽￣*)ブ

 

1) text

<input>태그의 type 속성값을 "text"로 설정하면, 한줄의 문자를 입력받는 글상자가 생성된다.

 

 <input type="text">

 

 

2) password

 

<input>태그의 type 속성값을 "password"로 설정하면, 비밀번호를 입력받는 글상자가 생성된다.

비밀번호이기 때문에, 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.

 

<input type="password">

 

 

[text와 password를 이용한 로그인창 예시]

<form>
<p>아이디 <input type="text"></p>
<p>비밀번호 <input type="password"></p>
</form>

잠깐! size,  mexlength, required 속성을 알아보고 넘어가자 :)

size  : 크기를 설정하는 속성

mexlength : 값의 최대 길이를 설정하는 속성
required :  데이터를 필수로 입력하도록 지정하는 옵션

 

[예시]

 

<p>아이디 <input type="text" size="30" maxlength="20" required></p>
<p>비밀번호 <input type="password" size="30" maxlength="20" required></p>

 

[결과]

 

처음 만들었던 로그인창 보다 칸의 길이가 길어 졌으며, 글자를 20개 까지만 입력할 수 있다.

그리고, 값을 입력하지 않고 넘어 가려 할 시, 아래와 같은 문구가 뜬다

 

 

3) radio

 

<input>태그의 type 속성값을 "radio"로 설정하면, 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있다.

 <input type="radio">

* radio는 그룹을 맺기 위해 name 속성의 값이 동일해야 한다.

[예시]

 <input type="radio" name="gender" value="남자">
 <input type="radio" name="gender" value="여자">

두개의 radio는 gender라는 같은 name을 가지고 있기 때문에 그룹으로 묶인다

 

잠깐! 라벨 <label> 을 알아보자 :)

radio를 사용하여 선택을 해야할 때 너무 작아서 선택하는데 어려움을 느낄 수 있다.

이때, 사용할 수 있는것이 <label>로, 폼 양식에 이름을 붙이는 요소이다.

label 요소와 다른 요소를 연결하면 해당 영역이 넓어진다.

 

<label>남자<input type="radio" name="gender" value="남자" checked></label>
<label>여자<input type="radio" name="gender" value="여자"></label>

 

실행해보면 외관상 보기에는 달라진게 없어 보인다.

하지만, <label>요소 사용전에는 정확히 원을 눌러야만 체크가 됐던것이 <lable> 적용 후에는

동그라미 외에 남자와 여자를 눌러도 체크가 되는것을 확인할 수 있다.

 

 

4) checkbox

 

<input>태그의 type 속성값을 "checkbox"로 설정하면, 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있다

 

<input type = "checked">

*서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.

[예시]

<p>
식물키우기<input type="checkbox" name="hobby" value="식물키우기">
게임<input type="checkbox" name="hobby" value="게임">
스노우보드<input type="checkbox" name="hobby" value="스노우보드">
낚시<input type="checkbox" name="hobby" value="낚시">
영화보기<input type="checkbox" name="hobby" value="영화보">
골프<input type="checkbox" name="hobby" value="골프">
</p>

 

잠깐! checked 속성과 disabled 속성에 대해 알아보자 :)

 

checked 속성 : 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

disabled 속성 : 해당 옵션을 선택할 수 없게 설정할 수도 있다.

 

[예시]

<p>
식물키우기<input type="checkbox" name="hobby" value="식물키우기" checked>
게임<input type="checkbox" name="hobby" value="게임">
스노우보드<input type="checkbox" name="hobby" value="스노우보드" disabled>
낚시<input type="checkbox" name="hobby" value="낚시">
영화보기<input type="checkbox" name="hobby" value="영화보기">
골프<input type="checkbox" name="hobby" value="골프">
</p>

 

 

5) file

 

<input>태그의 type 속성값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.

 

<input type="file">

[예시]

 <p>사진 <input type="file"></p>

 

6) button

 

이벤트가 없는 일반 버튼이 생성된다.

 

<input type="button" value="버튼명">

 

[예시]

이벤트가 없는 버튼이기때문에, 보통 이벤트를 넣어서 사용한다.

 <input type="button" value="버튼" onclick="alert('클릭했어요')">
  <!--onclick : 버튼이 클릭이 됐다면-->

위와 같은 버튼이 생성되고 클릭하면 '클릭했어요'라는 팝업창이 뜬다

 

 

 

7) select

 

여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.

<option>요소를 통해 선택할 수 있는 아이템을 설정한다.

<select>
    <option value="값">내용</option>
    ....
</select>

 

[예시]

<select>
<!--value는 데이터값 눈에 보이지 않음 옵션 태그 사이에 있는 내용이 눈으로 보임-->
  <option value="학생">학생</option>
  <option value="조무사">조무사</option>
  <option value="무직">무직</option>
  <option value="백엔드개발자">백엔드개발자</option>
  <option value="주부">주부</option>
  <option value="농부">농부</option>
</select>

 

 

이때, selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

<select>
  <option value="학생">학생</option>
  <option value="조무사">조무사</option>
  <option value="무직" selected>무직</option>
  <option value="백엔드개발자">백엔드개발자</option>
  <option value="주부">주부</option>
  <option value="농부">농부</option>
</select>

 

7) textarea

여러줄의 텍스트를 입력받는 글상자이다.

<textarea cols="가로 글자수" rows="세로 글자수"></textarea>

[예시]

<p><textarea cols="50" rows="5"></textarea></p>

 

이때, placeholder 속성을 사용하여, 입력전 특정 데이터를 입력하도록 안내하는 값을 설정할 수 있다.

 

[예시]

<p><textarea cols="50" rows="5" placeholder="내용을 입력하세요."></textarea></p>
<p>아이디 <input type="text" placeholder="아이디를 입력하세요"d></p>
<p>비밀번호 <input type="password" placeholder="비밀번호를 입력하세요"></p> 

 

 

8) reset

 

모든 폼(form) 요소의 값을 초깃값으로 되돌리는 리셋 버튼(reset button)이다.

 

<input type="reset" value="버튼명">

 

 

9) submit

 

<input>태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있다.

 

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.
이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

 

<form method="post" action="regist.php">
<input type="submit" value="전송">

 

10) <fieldset>과 <legend>

 

<fieldset>은 폼 요소를 그룹으로 묶을 때 사용한다.

<legend>는 <fieldset>의 제목을 만들 때 사용한다.

 

[예시]

 <fieldset>
        <legend>성별</legend>
        <label>남자<input type="radio" name="gender" value="남자" checked></label>
        <label>여자<input type="radio" name="gender" value="여자"></label>
</fieldset>