HTML 문서에서 입력양식 (form) 태그 사용하기

지나·2022년 3월 6일

🐻 입력양식 (=폼)

웹에서 사용자에게 정보를 입력 받을 때 사용하는 사용자 인터페이스를 의미

입력 양식에서 사용하는 태그들
form / fieldset legend / label / textarea / select / datalist / button / input

✏️ form 태그의 속성들

📌 input 태그의 type 속성들

🖌 input 태그와 함께 사용 되는 속성들 (type 속성과도 함께 사용 가능)

form

<form> ~ </form>

HTML 문서에서 입력양식을 만드는 가장 기본적인 태그

<form 속성 ="속성값">폼 요소</form>

`form` 태그는 여러가지 속성과 속성값을 가진다.

✏️ form 태그의 속성들

action method name target autocomplete novalidate 등의 속성들이 있다.

각 속성에 대한 내용은 아래와 같다. (더 찾으면 내용을 추가하도록 하겠습니다 !!!!)

<form action="서버">

✏️ form 내용을 처리할 서버를 지정하는 속성

<form method="get">     <!--데이터크기 제한, 보안 안됨-->
<form method="post">    <!--데이터크기 제한 없음, 보안 됨-->

✏️ form 내용을 서버로 전달하는 방식을 지정하는 속성
="get" 방식은 폼 데이터를 url 에 추가하여 서버로 전달 (보안에 취약, 데이터 크기 제한)
="post" 방식은 폼 데이터를 별도로 추가하여 서버로 전달 (보안성 좋음, 데이터 크기 제한 없음)

<form name="">

✏️ form 의 이름을 지정하는 속성

<form target="_self">     <!--결과를 현재 창에서 오픈-->
<form target="_black">    <!--결과를 새 창에서 오픈-->

✏️ action 에서 지정한 서버 결과를 오픈하는 방식을 지정하는 속성

<form autocomplete="on">     <!--텍스트 필드에서 자동완성 기능을 사용-->
<form autocomplete="off">    <!--텍스트 필드에서 자동완성 기능을 사용하지않음-->

✏️ 해당 폼의 텍스트 필드에서 자동완성 기능을 지정하는 속성

<form novalidate>

✏️ 데이터의 유효성을 검사하지 않도록 지정하는 속성 (주로 테스트 시 사용)

fieldset legend

<fieldset>
	<legend>그룹 이름</legend>
</fieldset>

하나의 폼 안에서 구역을 나눌 때 사용하는 그룹 태그

label

<label> ~ </label>

폼 요소에 텍스트(=라벨)를 붙일 때 사용

요소에 라벨을 붙이는 방법은 아래와 같다.

<label>아이디<input type="text"></label>   <!--텍스트필드에 '아이디'라는 글자 붙임-->

첫번째, lable 태그 안에 직접 input 요소를 삽입하여 어디에 라벨을 붙일지 지정함

<fieldset>
	...
    <label for="name">이름</label>   
	<input type="text" id="name">
    ...
</fieldset>

두번째, label for 값과 input id 값을 같게 만들어 라벨을 연결시킴

textarea

<textarea cols="20" rows="2">필드에 미리 입력 될 문구</textarea>

여러 줄을 입력하는 텍스트 필드를 삽입할 때 사용

cols : 가로 너비를 문자 단위로 지정 ex) 40 이면 영문으로 40글자, 한글로 20글자
rows : 몇 줄이나 표시 할 것인지 지정

select option

<select size="5" multiple>
	<option value="s_1">선택1</option>
    <option value="s_2">선택2</option>
    <option value="s_3">선택3</option>
    <option value="s_4">선택4</option>
    <option value="s_5">선택5</option>
</select>

드롭다운 목록을 삽입할 때 사용

select 태그는 사용자가 option 의 범위내에서만 선택이 가능한 목록을 제공한다.

multiple : 두개 이상의 항목을 선택할 때 사용하는 속성
value : 서버로 넘길 값을 지정

multiple 속성을 사용하지 않았을 때

multiple 속성을 사용하였을 때

datalist option

<input list="menu">
<datalist id="menu">
	<option value="김치찌개"></option>
    <option value="돈까스"></option>
    <option value="계란볶음밥"></option>
</datalist>

폭넓은 선택을 가능하게 하는 목록 삽입 시 사용

datalist 태그는 만들어진 목록에 없는 값을 사용자에게 입력 받을 수 있다.
사용자가 목록창에 타이핑을 할 시 option 목록에서 일치하는 값을 찾아 자동 완성 기능을 제공하기 때문에
고려해야할 목록이 매우 많을 경우, 직접 타이핑하여 원하는 값을 쉽게 찾을 수 있다.

input list : input 태그에 ilst 라는 요소로 datalist 의 id 값과 연결시킨다.
value : 웹 브라우저에 표기될 목록 이름

button

<button type="submit">버튼에 표시 될 내용</button>

기능의 유무를 선택할 수 있는 버튼을 삽입할 시 사용

type="submit : 폼을 서버로 전송하는 기능을 가진 버튼
type="reset" : 입력 내용을 초기화 하는 기능을 가진 버튼
type="button" : 아무 기능이 없는 버튼

input

<input 속성="속성값">

폼에서 사용자의 정보를 입력 받을 때 사용하는 데이터 양식 태그

input 태그는 입력 받을 정보에 따라 다양한 타입으로 위젯이 생성된다.

📌 input 태그의 type 속성들

text password search url email tel checkbox radio number range date month week time datetime datetime-local submit reset image button file hidden

📌 text password

input type="text" input type="password"

<input type="text" name="my_name" size="20">    <!--텍스트 입력 필드 삽입-->
<input type="password" maxlength="10">          <!--비밀번호 입력 필드 삽입-->

name : 필드 이름을 my_name 으로 지정
size : 필드 너비 사이즈 지정 (화면에 20글자만 보이고 나머지 글자들은 숨겨짐)
maxlength : 입력 가능한 최대 문자 수를 10글자로 지정
value : 텍스트 필드에 미리 보여줄 초기값을 설정할 수 있음 ex) 아이디를 입력하세요.

📌 search url email tel

input type="search" input type="url" input type="email" input type="tel"

<input type="search">   <!--검색을 위한 텍스트 필드 삽입-->
<input type="url">      <!--웹 주소를 입력하는 텍스트 필드 삽입-->
<input type="email">    <!--이메일을 입력하는 텍스트 필드 삽입-->
<input type="tel">      <!--전화번호를 입력하는 텍스트 필드 삽입-->

name size maxlength value 속성 부여 가능

📌 checkbox radio

input type="checkbox"

<input type="checkbox" value"server_1">

항목 선택 폼 요소 - 체크박스 : 주어진 항목 중 2개 이상 선택 시 사용

value : 서버에 넘겨줄 값을 지정 (영문이거나 숫자, 필수속성)
checked : 기본으로 선택해놓고 싶은 항목에 사용

input type="radio"

<input type="radio" name="radio1" value"server_1">

항목 선택 폼 요소 - 라디오 : 주어진 항목 중 1개만 선택 시 사용

name : 하나의 라디오버튼 안의 항목들은 모두 같은 이름값을 가진다.
value : 서버에 넘겨줄 값을 지정 (영문이거나 숫자, 필수속성)
checked : 기본으로 선택해놓고 싶은 항목에 사용

📌 number range

input type="number"

<input type="number" min="1" max="5">

숫자 입력 필드 - 스핀박스

min max : 숫자 입력 최소/최대값을 지정 (기본값은 각 0, 100 이다.)
step : 숫자가 높아지는 간격을 지정 (기본값은 0 이다.)
value : 숫자 입력 필드에 미리 표시할 초기값

input type="range"

<input type="range" step="1" value="1">

숫자 입력 필드 - 슬라이드 막대