오늘은 웹 폼에 대한 정리를 하려고 한다! 먼저 폼(form)은 우리가 어떠한 양식을 쉽게 만들 수 있도록 도와주는 친구라고 생각하면 된다.
예시
그럼 이제부터 폼을 만드는 태그들과 속성에 대해 알아보자.
<form [속성="속성값"] > 폼의 여러 요소 </form>
폼 태그 사이에 여러 폼 요소와 관련된 태그를 사용하여 폼을 만듦
method 속성
사용자가 입력한 내용을 어떻게 서버에 넘겨줄지 지정하는 속성
action 속성
폼 태그 안에 내용들을 처리해 줄 서버상의 프로그램 지정
name 속성
폼의 이름 지정
target 속성
action 태그에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정
사용자가 내용을 입력하는 필드를 삽입하거나 버튼을 삽입할 때 사용
<form>
<input type="text" value="내용 입력">
<input type="button" value="버튼">
</form>
이런 필드를 사용할 때 우리는 '자동 완성 기능'을 본 적이 있을 것이다.
이때 사용하는 것이 autocomplete라는 속성으로 속성값을 on/off로 지정해 사용하면 된다.
폼 요소에 이 요소가 무엇인지 앞에 설명을 할 수 있도록 도와주는 태그이다. 예를 들어 로그인을 할 때 아이디, 비밀번호라고 필드 앞에 붙어있는 것을 본 적이 있을텐데 이런 것을 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 태그를 사용한다.
<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 type="text" placeholder="설명">
placeholder가 없을 때:
placeholder가 있을 때:
입력란의 텍스를 사용자가 수정할 수 없도록 만듦
<input type="text" readonly>
<input type="text" readonly="readonly">
<input type="text" readonly="ture">
필수로 입력해야 하는 필드에 대해 내용이 모두 채워졌는지 검사할 수 있게 하는 속성
<input type="text" required>
<input type="text" required="required">
min과 max 속성은 각 필드의 최소/최대값을 지정한다.
step는 허용된 범위 내의 숫자의 일정한 간격을 가리킨다.
단 ! input의 type이 date, datetime, mdatetime-local, month, week, time,number, range인 경우만 사용이 가능하다.
<input type="number" min="0" max="100" step="10">
숫자의 조건이 아닌 텍스트 길이의 조건으로 만들고 싶을 때 사용하는 속성이다.
minlength와 maxlength는 텍스트의 최소/최대 길이를 지정한다.
size는 몇 글자까지 화면에 보이게 할 지를 지정한다.
<input type="text" minlength="5" maxlength="15" size="15">
드롭다운 목록은 다음과 같다
학과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과 전기전자공학과
드롭다운 목록은 <select>, <option>, <optgroup> 3가지 태그로 이루어져 있다.
<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> 태그의 속성값은 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> 속성이다.
<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 등 다양한 폼 요소들이 존재한다.
<form>
<button type="submit"> 저장! </button>
</form>
저장!
<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>
+ =
<form>
<label> 진행률 : 30 % </label>
<progress value="3" max="10"></progress>
</form>
진행률 : 30 %
<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에 대해 더 자세히 알아볼 것이다!!! 그럼 실습하러 안뇽~!