[HTML] form & input 태그

개요

이전 글에서는 이미지, 표, 링크 만드는 것 까지 했었는데 이번에 할건 사용자에게 입력받을 수 있도록 하는 form 태그와 input 태그이다.

 

이미지 & 표 & 링크

 

 

1. <form> 태그

사용자가 입력한 데이터를 서버로 전송할 수 있도록 하는 HTML의 태그이다.

로그인, 회원가입, 검색 창 등 다양한 데이터를 입력하고 제출하는 기능을 구현할 때 사용된다.

 

<form action="/submit" method="post">
	<!-- input 요소들 -->
</form>

 

: action

-> 데이터를 전송할 서버의 URL 또는 html 파일을 지정한다.(= 즉, 보낼 곳!)

 

: method

-> 데이터를 전송하는 방법을 지정한다.

 

    <p>사용자 입력</p>
    <form>
      <label for="name">이름</label>
      <input type="text" id="name" name="name" />
      <button type="submit">제출</button>
    </form>

 

form 태그 안에 input 태그를 통해 사용자 입력을 받도록 했다.

 

: label

-> input 요소와 연결되어 입력 필드의 의미를 명확하게 설명하는 역할

-> 여기서는 "이름"

 

: input

-> type에 따라 다양한 입력 필드를 만들 수 있다.(= 여기서는 text)

-> id는 input 요소를 고유하게 식별하는 값이다.

-> input의 id와 label의 for을 같은 값으로 지정하면, label을 클릭하더라도(여기서는 이름) input 요소를 클릭한 것과 동일하게 작동한다.

-> name은 데이터를 전송할 때 변수명의 역할을 한다.

 

: <button>

-> 버튼 요소를 넣을 때 사용

-> type 속성을 통해 행동을 지정해주는데 여기서는 submit으로 특정 주소로 제출하는 용도로 사용했다.

 

3-1. <fieldset> 태그

여러 개의 <input> 요소를 그룹화할 때 사용하는 태그이다.

<form>
      <fieldset>
        <legend>개인 정보</legend>
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" />
        <br /><br />
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" />
      </fieldset>

      <fieldset>
        <legend>로그인 정보</legend>
        <label for="username">아이디:</label>
        <input type="text" id="username" name="username" />
        <br /><br />
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password" />
      </fieldset>

      <button type="submit">제출</button>
    </form>

 

위의 그림을 보면 '개인 정보'와 '로그인 정보'가 나뉘어져 그룹화되어 있는 모습을 볼 수 있다.

 

여기서 <fiedset disabled>로 태그를 지정하면 그 <form>은 비활성화 된다.(= input 요소가 클릭되지 않음)

 

: legend

-> 그룹화된 form들에 제목을 작성할 때 사용하는 것.

 

2. <input> 태그 상세

 

2-1. input의 기본 type 속성

    <p>Type 속성</p>
    <form>
      <input type="text" placeholder="이름 입력" />
      <br /><br />
      <input type="password" placeholder="비밀번호 입력" />
      <br /><br />
      <input type="email" placeholder="이메일 입력" />
      <br /><br />
      <input type="number" min="0" max="100" />
      <br /><br />
      <input type="tel" placeholder="전화번호 입력" />
      <br /><br />
      <input type="url" placeholder="웹사이트 URL 입력" />
    </form>

 

 

input 태그에 type 속성은 위와 같은 것들이 올 수 있고, 원하는 방식에 따라 넣어줘서 사용하면 된다.

 

2-2. 체크 관련

체크 관련한 type으로 대표적으로 체크박스와 라디오버튼이있다.

    <form>
      <input type="checkbox" id="agree" name="agree" />
      <label for="agree">이용 약관 동의</label>
      <br /><br />
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">남성</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">여성</label>
    </form>

 

주의할점으로 체크하는 곳 다음에 텍스트가 나오기 때문에 input 다음에 label을 입력해줘야 한다는 것!

 

: radio

-> 동일한 name을 통해 그룹을 지정할 수 있다.

-> 여기서는 gender라는 name으로 하나의 그룹을 설정했다.

-> value는 서버에 넘어가는 실제 데이터 값이다.

 

2-3. 날짜 및 시간

날짜 및 시간 또한 type을 통해 지정할 수 있다. 이때 각각의 브라우저에 맞춘 디자인으로 나타난다고 한다.

    <p>날짜 및 시간</p>
    <input type="date" />
    <br /><br />
    <input type="datetime-local" />
    <br /><br />
    <input type="month" />
    <br /><br />
    <input type="week" />
    <br /><br />
    <input type="time" />

2-4. 파일

input을 통해 file 또한 사용자에게 입력 받을 수 있다.

     <form action="/upload" method="post" enctype="multipart/form-data">
      <label for="file">파일 선택:</label>
      <input
        type="file"
        id="file"
        name="file"
        accept="image/png, image/jpeg "
        required
        multiple
      />
      <br />
      <button type="submit">업로드</button>
    </form>

-> type은 file로 지정하면 된다.

 

: accept

-> 특정 파일 확장자만 선택할 수 있도록 제한할 수 있다.

 

: required

-> 반드시 파일을 업로드해야 제출할 수 있도록 하는 것. 다른 type에서도 적용이 가능하다.

 

: multiple

-> 단일 파일이 아닌 다수의 파일도 적용할 수 있도록 하는 속성

 

2-5. 옵션 선택

드롭다운 목록을 생성하는 데 사용하는 태그는 <select> 태그이다. 이때 <option> 태그를 통해 선택이 가능한 항목들을 정의할 수 있다.

    <p>옵션 선택</p>
    <form>
      <label for="fruits">좋아하는 과일:</label>
      <select id="fruits" name="fruits">
        <option value="apple">사과</option>
        <option value="banana">바나나</option>
        <option value="grape">포도</option>
      </select>
    </form>

: option

-> 여기서 value 속성은 해당 옵션을 선택했을 때 서버에 보낼 값에 해당한다.

 

 

<datalist> 태그도 있는데 얘는 자동 완성 옵션을 제공할 때 사용한다.

    <p>자동 완성 선택</p>
    <form>
      <label for="browser">사용하는 브라우저:</label>
      <input list="browsers" id="browser" name="browser" />
      <datalist id="browsers">
        <option value="Chrome"></option>
        <option value="Firefox"></option>
        <option value="Edge"></option>
        <option value="Safari"></option>
      </datalist>
    </form>

참고

얄코의 Too Much 친절한 HTML+CSS+자바스크립트