[HTML&CSS] Form

Gaeon Kim·2022년 4월 28일
1

HTML & CSS

목록 보기
3/4
post-thumbnail

오늘은 웹 폼에 대한 정리를 하려고 한다! 먼저 폼(form)은 우리가 어떠한 양식을 쉽게 만들 수 있도록 도와주는 친구라고 생각하면 된다.

예시

그럼 이제부터 폼을 만드는 태그들과 속성에 대해 알아보자.


폼 만들기

<form [속성="속성값"] > 폼의 여러 요소 </form>
폼 태그 사이에 여러 폼 요소와 관련된 태그를 사용하여 폼을 만듦

<form> 태그의 속성

method 속성
사용자가 입력한 내용을 어떻게 서버에 넘겨줄지 지정하는 속성

  • get
  • 주소 표시줄에 사용자가 입력한 내용이 드러나며, 내용 길이에 제한이 있음
  • post
  • 표준입력으로 입력으로 넘겨주어 내용이 드러나지 않으며, 내용 길이에 제한이 없음

action 속성
폼 태그 안에 내용들을 처리해 줄 서버상의 프로그램 지정

name 속성
폼의 이름 지정

target 속성
action 태그에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정


폼의 여러 요소

input 태그

사용자가 내용을 입력하는 필드를 삽입하거나 버튼을 삽입할 때 사용

<form>
<input type="text" value="내용 입력">
<input type="button" value="버튼">
</form>

이런 필드를 사용할 때 우리는 '자동 완성 기능'을 본 적이 있을 것이다.
이때 사용하는 것이 autocomplete라는 속성으로 속성값을 on/off로 지정해 사용하면 된다.

label 태그

폼 요소에 이 요소가 무엇인지 앞에 설명을 할 수 있도록 도와주는 태그이다. 예를 들어 로그인을 할 때 아이디, 비밀번호라고 필드 앞에 붙어있는 것을 본 적이 있을텐데 이런 것을 label 태그를 통해 만든다.
label 태그는 2가지 방법으로 사용할 수 있다.

방법 1

<form>
	<label>아이디<input type="text"> </label>
	<label>패스워드<input type="text"> </label> 
</form>
아이디 패스워드

방법 2

<form>
<label for="아이디 필드">아이디</label>
<input id="패스워드 필드" type="text">
<label for="패스워드 필드">패스워드</label>
<input id="아이디 필드" type="text">
</form>    
아이디 패스워드

fieldset 태그와 legend 태그

폼 안에서 구역을 나누고 싶을 때 fieldset 태그를 사용한다.

<form>
  <fieldset>
    <legend>개인정보</legend>
    <ul style="list-style-type:none">
      <li>
    	<label for="이름">이름</label>
    	<input id="이름" type="text">
      </li>
      <li>
    	<label for="이메일">이메일</label>
    	<input id="이메일" type="email">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>로그인 정보</legend>
    <ul style="list-style-type:none">
      <li>
        <label for="아이디">아이디</label>
        <input id="아이디" type="text">
      </li>
      <li>
        <label for="패스워드">패스워드</label>
        <input id="패스워드" type="password">
      </li>
    </ul>
  </fieldset>
</form>
개인정보
  • 이름
  • 이메일
로그인 정보
  • 아이디
  • 패스워드

이렇게 fieldset 태그를 통해 하나로 묶어주고 legend 태그를 통해 묶어준 부분의 이름을 정해준다.


입력을 위한 태그

<input type="유형" [속성="속성값"] >

이때 type은 text, tel, url, email, password 등 여러가지 타입이 존재한다. 필요한 목적에 따라 사용하면 된다.


<input> 태그의 속성

autofocus 속성

페이지를 불러오자 마자 원하는 폼의 요소에 마우스 커서를 표시할 수 있게끔 함

placeholder 속성

텍스트를 이별할 대 도움이 되도록 하는 힌트를 표시할 수 있게끔 함

<input type="text" placeholder="설명">

placeholder가 없을 때:
placeholder가 있을 때:

readonly 속성

입력란의 텍스를 사용자가 수정할 수 없도록 만듦

<input type="text" readonly>
<input type="text" readonly="readonly">
<input type="text" readonly="ture">

required 속성

필수로 입력해야 하는 필드에 대해 내용이 모두 채워졌는지 검사할 수 있게 하는 속성

<input type="text" required>
<input type="text" required="required">

min, max, step 속성

min과 max 속성은 각 필드의 최소/최대값을 지정한다.
step는 허용된 범위 내의 숫자의 일정한 간격을 가리킨다.

단 ! input의 type이 date, datetime, mdatetime-local, month, week, time,number, range인 경우만 사용이 가능하다.

<input type="number" min="0" max="100" step="10">

size, minlength, maxlength 속성

숫자의 조건이 아닌 텍스트 길이의 조건으로 만들고 싶을 때 사용하는 속성이다.
minlength와 maxlength는 텍스트의 최소/최대 길이를 지정한다.
size는 몇 글자까지 화면에 보이게 할 지를 지정한다.

<input type="text" minlength="5" maxlength="15" size="15">

데이터를 나열하는 태그

드롭다운 목록은 다음과 같다

학과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과 전기전자공학과

드롭다운 목록은 <select>, <option>, <optgroup> 3가지 태그로 이루어져 있다.

<select> 태그

<select> 태그는 드롭다운 목록의 시작과 끝을 표시한다.

<select> 태그의 속성값은 2가지가 존재한다.
먼저 size를 통해 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정할 수 있으며,
multiple을 통해 여러개 항목을 지정할 수 있도록 할 수 있다.

<form>
  <label for="class"> 학과 </label>
  <select id="class" size="3" multiple>
    <option> 건축공학과 </option>
    <option> 기계공학과 </option>
    <option> 산업공학과 </option>
    <option> 화학공학과 </option>
    <option> 컴퓨터공학과 </option>
    <option> 전기전자공학과 </option>
  </select>
</form>
학과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과 전기전자공학과

<option> 태그

<option> 태그를 사용해 원하는 항목을 추가한다.

<option> 태그의 속성값은 2개가 존재한다.
먼저 value는 옵션을 선택했을 때 서버로 넘겨질 값을 지정할 수 있으며,
selected는 화면에 표시될 때 기본으로 선택되어있는 옵션을 지정할 수 있다.

<form>
  <label for="class"> 학과 </label>
  <select id="class">
    <option value="archi"> 건축공학과 </option>
    <option value="machenic"> 기계공학과 </option>
    <option value="indust"> 산업공학과 </option>
    <option value="chem"> 화학공학과 </option>
    <option value="computer" selected> 컴퓨터공학과 </option>
    <option value="elec"> 전기전자공학과 </option>
  </select>
</form>
학과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과 전기전자공학과

<optgroup> 속성

드롭다운 목록의 여러 항목을 각 그룹으로 묶어야 할 경우 사용할 수 있는 속성이 바로 <optgroup> 속성이다.

<form>
  <label for="class"> 학과 </label>
  <select id="class">
    <optgroup label="공과대학">
      <option value="archi"> 건축공학과 </option>
      <option value="machenic"> 기계공학과 </option>
      <option value="indust"> 산업공학과 </option>
      <option value="chem"> 화학공학과 </option>
      <option value="computer" selected> 컴퓨터공학과 </option>
      <option value="elec"> 전기전자공학과 </option>
    </optgroup>
    <optgroup label="인문대학">
      <option> 국어국문과 </option>
      <option> 사학과 </option>
      <option> 철학과 </option>
    </optgroup>
  </select>
</form>
학과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과 전기전자공학과 국어국문과 사학과 철학과

텍스트 영역을 만드는 태그

input 태그의 type을 text로 한 경우 우리는 한 줄만 화면으로 볼 수 있다. 게시물을 쓰고자 할 때 한 줄만 화면으로 표시된다면 많이 답답할 것이다. 이럴 때 사용할 수 있는 것이 <textarea>라는 태그이다.

textarea의 속성으로는 2가지 cols와 rows가 있다.
cols는 textarea의 너비를 픽셀 단위로 지정할 수 있게 도와주며
rows는 화면에 몇 줄을 표시할지 지정할 수 있게 해준다.

<textarea cols="60" rows="3" placeholder="글을 써보세요"></textarea>


다양한 폼 요소

위에서 설명한 것들 외에도 button, output, progress, meter 등 다양한 폼 요소들이 존재한다.

<button>

<form>
  <button type="submit"> 저장! </button>
</form>
저장!

<output>

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" name="num1" value="0">
  +<input type="number" name="num2" value="0">
  =<output for="num" name="result"></output>
</form>
+ =

<progress>

<form>
  <label> 진행률 : 30 % </label>
  <progress value="3" max="10"></progress>
</form>
진행률 : 30 %

<meter>

<form>
  <ul style="list-style-type:none">
    <li>
      <label> 점유율: 80% </label>
      <meter value="0.8"></meter>
    </li>
  	<li>
      <label> 사용율: 30% </label>
      <meter value="0.3" max="1.0" min="0.0" low="0.33" high="0.66"></meter>
    </li>
    <li>
      <label> 사용율: 50% </label>
      <meter value="0.5" max="1.0" min="0.0" low="0.33" high="0.66"></meter>
    </li>
    <li>
      <label> 사용율: 70% </label>
      <meter value="0.7" max="1.0" min="0.0" low="0.33" high="0.66"></meter>
    </li>
    <li>
      <label> 적잘한 트래픽 </label>
      <meter value="0.7" optimal="0.8"></meter>
    </li>
  </ul>
</form>
  • 점유율: 80%
  • 사용율: 30%
  • 사용율: 50%
  • 사용율: 70%
  • 적잘한 트래픽

다음부터는 이제 만든 HTML 페이지를 꾸며주는 CSS에 대해 더 자세히 알아볼 것이다!!! 그럼 실습하러 안뇽~!

0개의 댓글