Large Rainbow Pointer
[HTML] HTML 입력(input) 태그 #6
짱잼
[HTML] HTML 입력(input) 태그 #6💜 프론트엔드/HTML2023. 12. 7. 16:33@짱잼
Table of Contents

HTML 입력 태그

HTML 에서 아이디나 비밀번호 등 정보를 입력해서 로그인 하거나,

게시물과 댓글 등을 작성하기 위해서 입력 태그인 <input> 태그 등을 사용해야 한다.

 

HTML 입력 태그 구조

입력 태그를 사용하기 전 알아야 되는 4가지 태그가 있다.

태그 설명 속성
<form> 제출할 정보들을 담고 있는 태그 autocomplete (자동 완성 여부) - on, off
<input> 정보를 입력 받는 태그 type - 매우 다양함 
<label> <input> 태그의 라벨 for - input 태그의 id 와 연결
<button> 버튼 type - submit(제출), rest(초기화), button(기본)

 

사용 방법은 다음과 같다.

<form> 태그 안에 <input> <label> <button> 태그를 넣는다.

 

<input> 은 입력받는 태그로 이름을 입력받기 위해 text 형식을 속성으로 설정해준다.

<label> 은 <input> 태그의 라벨로 <label> 의 for 값과 <input> 의 id 값이 동일해야 한다.

<label for="name">이름</label>
<input id="name" name="my-name" type="text" />

 

나이를 입력받기 위해 number 형식을 속성으로 설정해 준다.

<label for="age">나이</label>
<input id="age" name="my-age" type="number" />

 

그리고 입력받은 내용을 제출하기 위해 <button> 의 type 속성을 submit 으로 설정하고

입력받은 내용을 초기화하기 위해 <button> 의 type 속성을 reset 으로 설정한다.

    <h2>입력 태그</h2>
    <form action="./result.html" method="get">
      <label for="name">이름</label>
      <input id="name" name="my-name" type="text" />
      <br /><br />
      <label for="age">나이</label>
      <input id="age" name="my-age" type="number" />
      <br /><br />
      <button type="submit">제출</button>
      <button type="reset">초기화</button>
    </form>

그러면 아래와 같은 결과가 나오고, 값을 입력할 수 있게 된다.

결과

+) form 태그의 action, method 사용법

더보기

form 태그의 action, method 사용법
해당 부분은 javascript 와 관련된 부분이다.

 

제출 결과를 ./result.html 로 HTTP method GET 으로 보낸다.

<form action="./result.html" method="get">

그러면 http://127.0.0.1:5500/HTML/result.html?my-name=짱잼&my-age=10
여기로 이동하게 되고

해당 화면에 form 결과를 보여주기 위해, result.html 파일을 새로 만들어 준다.

그리고 아래와 같은 코드를 작성하면

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var urlParams = new URLSearchParams(window.location.search);

      var myName = urlParams.get('my-name');
      var myAge = urlParams.get('my-age');

      document.write('<p>이름: ' + myName + '</p>');
      document.write('<p>나이: ' + myAge + '</p>');
    </script>
  </body>
</html>

화면에 결과가 나타나는 것을 볼 수 있다.

 

input 태그 속성

<input>에는 매우 많은 속성을 가지고 있다.

자세한 내용은 아래 링크에서 확인할 수 있다.

 

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element

developer.mozilla.org

 

input 태그 - 공통(대부분) 속성

input 태그를 사용할 때 공통적으로 대부분 적용되는 속성이다.

물론 type 에 따라 적용되지 않는 것도 있다.

 

공통 속성 - minlength, maxlength, placeholder

<label for="lenIp">length</label> <br />
<input id="lenIp" type="text" minlength="3" maxlength="7" placeholder="3자 이상, 7자 이하" />
  • minlength: 입력 최소 길이
  • maxlength: 입력 최대 길이
  • placeholder: 임시 텍스트

minlength와 maxlength 를 사용하여 입력할 내용의 최소, 최대 길이를 설정할 수 있다.

그리고 placeholder 로 입력하기 전 해당 입력창에 어떻게 입력해야 되는지 임시로 텍스트를 써줄 수 있다.

결과

 

공통 속성 - autofocus, value

<label for="afIp">autofocus</label> <br />
<input id="afIp" type="text" value="포커스" autofocus />
  • autofocus: 첫 실행 시 먼저 포커스 되는 입력 창
  • value: 입력 창의 값

새로고침을 해도 먼저 autofocus 가 있는 입력창으로 포커스가 된다.

그리고 value 값으로 "포커스" 가 설정되어 있어 자동으로 값이 들어가 있게 된다.

결과

 

공통 속성 - readonly

<label for="roIp">readonly</label> <br />
<input id="roIp" type="text" value="읽기만 가능, 전송됨" readonly />
  • readonly: 읽기만 가능, 서버로 value 값이 전송

readonly 속성으로 사용자가 읽을 수는 있지만, 값을 수정할 수 없고

value 값을 지정해 주면 해당 값이 서버로 전송된다.

결과

 

공통 속성 - required

<label for="rqIp">required</label> <br />
<input id="rqIp" type="text" placeholder="필수입력!" required />
  • required: 필수 입력

required 속성이 있으면 필수 입력해야 되므로, 입력하지 않고 제출을 하면 경고가 뜬다.

결과

 

공통 속성 - disabled

<label for="daIp">disabled</label> <br />
<input id="daIp" type="text" placeholder="입력불가, 전송 안됨" disabled />
  • disabled: 입력 불가능, 서버로 전송 안 됨

disabled 는 readonly 와 비슷해 보이지만, 서버로 값이 전송이 안된다는 차이점이 있다.

결과

 

input 태그 - type 속성

<input> 의 형태를 결정하는 type 속성은 위에서 했던 text 와 number 이외에도 정말 많다.

 

우선 크게 아래 표와 같은 type 속성이 있다. 이 외에도 많으니깐 아래 링크를 확인하는 것을 추천한다.

input 태그 type 속성

type 속성 설명
email 이메일
password 비밀번호, 눈으로 보았을 때 **** 형식으로 입력 됨
search 검색
tel 전화번호
range 범위 스크롤 바
date 날짜
checkbox 체크 박스(여러 개 선택 가능)
radio 라디오 버튼(하나만 선택 가능)
file 파일 첨부
hidden 내용 숨기기, 안 보이지만 서버에 제출 됨

 

type 속성 - email, password

    <form>
      <label for="emlIp">email</label> <br />
      <input id="emlIp" type="email" /> <br />
      <label for="pwdIp">password</label> <br />
      <input id="pwdIp" type="password" />
      <br /><br />
      <button type="submit">제출</button>
    </form>

type 으로 email, password 로 설정하면,

password 는 ** 형태로 보이게 되고

제출할 경우, email 형식이 맞지 않다고 경고창이 뜨게 된다.

 

결과

 

type 속성 - search, tel

    <form>
      <label for="srchIp">search</label> <br />
      <input id="srchIp" type="search" />
      <br /><br />
      <label for="tlIp">tel</label> <br />
      <input id="tlIp" type="tel" />
    </form>

search 는 검색 창이 되어 오른쪽에 취소 버튼이 생기고, tel 은 전화번호를 입력하는 입력 창이 된다.

만약 모바일로 확인할 경우, 용도에 맞게 키패드가 변경된다.

 

결과

 

type 속성 -  range, date

    <form>
      <label for="rgIp">range</label> <br />
      <input id="rgIp" type="range" min="0" max="100" step="20" />
      <br /><br />
      <label for="dtIp">date</label> <br />
      <input id="dtIp" type="date" min="2020-01-01" max="2030-12-31" />
      <br /><br />
    </form>

range 는 스크롤 바를 통해 값을 입력하는 것이다.

추가 속성으로 min, max, step 값을 사용해 최솟값, 최댓값, 간격을 설정할 수 있다.

그러면 해당 코드는 0부터 100까지 20 단위로 0, 20, 40, 60, 80, 100 값을 입력할 수 있다.

 

date 는 날짜는 입력하는 것이다.

이 또한 추가 속성으로 min, max 를 사용하여 날짜를 선택하는 시작, 끝 날짜를 설정할 수 있다.

date 이외에도 시간/날짜를 입력하는 type 들이 많다.

👉 datetime-local, month, time, week

 

결과

 

type 속성 - checkbox, radio

    <form>
      <h4>체크 박스</h4>
      <input id="apple" type="checkbox" checked />
      <label for="apple">사과</label> <br />
      <input id="grape" type="checkbox" />
      <label for="grape">포도</label> <br />
      <h4>라디오 버튼</h4>
      <input type="radio" name="grade" id="1_grade" value="1" checked />
      <label for="1_grade">1학년</label>
      <input type="radio" name="grade" id="2_grade" value="2" />
      <label for="2_grade">2학년</label>
      <input type="radio" name="grade" id="3_grade" value="3" />
      <label for="3_grade">3학년</label>
    </form>

checkbox 는 말 그대로 체크박스로 여러 개의 박스를 선택, 취소할 수 있다.

또한 checked 라는 속성을 주어 처음부터 해당 체크박스를 체크하도록 설정할 수 있다.

 

radio 는 라디오 버튼을 생성하여, 체크 박스와 다르게 한 가지 요소만 선택할 수 있다.

이 또한 checked 속성을 줄 수 있다.

그리고 name 값은 옵션들의 그룹으로 사용되고, value 는 서버에 넘겨질 옵션 값이다.

결과

 

type 속성 - file, hidden

    <form>
      <label for="fileIp">file</label> <br />
      <input id="fileIp" type="file" accept="image/png, image/jpeg" multiple />
      <br /><br />
      <label for="hdnIp">hidden</label> <br />
      <input id="hdnIp" type="hidden" />
    </form>

file 은 파일을 선택할 수 있다.

그 외 속성으로 accept 은 선택할 파일의 형식을 지정할 수 있고,

multiple 속성을 추가하면, 파일을 여러 개 선택할 수 있다.

 

hidden은 사용자에게 보이지는 않지만, 서버로 전달해야 할 정보를 넘겨줄 때 사용한다.

결과

 

 

마무리 하며...

해당 게시물에서 입력 태그에 대해 알아보았다.

입력 태그는 정말 많이 쓰이기 때문에, 제대로 알고 있어야 한다.

나도 많이 사용해 본 적이 많아 익숙하지만, 다시 한번 상기할 수 있게 되어 좋았다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)

저작자표시

'💜 프론트엔드 > HTML' 카테고리의 다른 글

[HTML / CSS] 시맨틱 태그 장점 / CSS position 속성  (0) 2024.03.17
[HTML] HTML 입력 태그 #7  (0) 2023.12.08
[HTML] HTML 링크 태그 #5  (1) 2023.12.06
[HTML] HTML 이미지 / 표 태그 #4  (1) 2023.12.05
[HTML] HTML 나열 태그 #3  (0) 2023.12.03
짱잼
@짱잼 :: 짱잼이의 FE 개발 공부 저장소

FE 개발자가 되고 싶은 짱잼이

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

💜 프론트엔드/HTML 추천 글
more
image
loading

티스토리툴바