[HTML] 입력 양식 (Form)

입력 양식 (Form)의 기본 구성

입력 양식이란, 전체 영역을 정의하기 위한 <form> 태그 안에 입력 항목의 그룹을 위한 <fieldset> 태그가 포함된 형태로 정의된다.
<fieldset> 태그 안에서는 그룹의 제목 지정을 위해 <legend> 태그가 사용될 수 있다.
<fieldset>은 입력 양식 영역 안에서 그룹을 형성하며, 필수적인 사항은 아니다.

<body>
	<!-- 입력 내용을 감싸기 위한 부분 -->
	<form>
		<!-- 입력 내용에 대한 구룹을 명시하는 부분 -->
			<fieldset>
					<!-- 그룹의 제목 -->
					<legend>내용 입력하기</legend>
			</fieldset>
	<form>
</body>

<form> 태그

입력 양식의 영역을 지정하며, 모든 태그가 내부에 배치될 수 있다.

<form action = "http://localhost:5050/form.html" accept-charse="uft-8" name = "first_form" method = "get" target = "_blank">
	
</form>

속성	설명
method	폼을 서버에 전송할 http 메서드를 지정 (GET / POST / PUT / DELETE)
action	폼을 전송할 서버 쪽 스크립트 파일 지정
name	폼을 식별하기 위한 이름 지정
accept-charset	폼 전송에 사용할 문자 인코딩 지정
target	action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 ("_blank")

<input> 태그

속성을 어떻게 사용하느냐에 따라 형태가 바뀌며, 마침 태그가 없어 나타나야 할 내용은 value에 바로 입력된다.

<input> 태그의 기본 속성

<input name="이름(영어)" id="식별자(영어)" type="종류" [value="기본값"] [maxlength="숫자"] [placeholder="설명"] />

속성	설명
name	태그의 이름을 지정하는 속성이며, 한 페이지 안에서 고유한 값을 명시해야 한다.
id	태그를 식별하기 위한 속성으로, 한 페이지 안에서 고유한 값을 명시해야 한다.
type	태그의 쓰임에 따라 모양을 다양하게 변경할 수 있다. text, radio, checkbox, password, button, hidden, file, submit, reset 등 지정 가능
value	해당 요소에 기본적으로 작성되어 있을 값을 지정한다.
maxlength	최대 입력 가능한 글자 수를 제한한다
placehoder	값이 입력되기 전, 보이게 될 설명글을 지정한다.
readonly	읽기 전용으로 지정한다.
disabled	사용 불가로 지정한다.
size	입력 필드의 크기를 지정한다.
autocomplete	입력 필드가 자동 완성 기능을 지원할 지에 대한 여부를 지정한다.
novalidate	제출 시, 데이터의 유효성 검사가 없도록 지정한다.
reauired	boolean 속성으로, 입력 필드를 필수 입력 필드로 지정한다.
pattern	정규 표현식을 사용하여, 특정 범위 내의 유효한 값을 입력받을 때 사용한다.
autofocus	페이지 로드 시, 자동적으로 해당 input 요소에 focus가 가도록 지정한다.

type 속성 값의 종류

type 속성 값	설명
text	텍스트 입력
password	비밀번호 입력 화면에는 입력받은 문자나 숫자가 별표나 작은 원 모양으로 표시된다.
email	이메일 입력 브라우저 지원에 따라, 폼이 제출될 때 이메일 주소가 자동으로 유효성 검사가 된다.
url	URL 주소 입력 브라우저 지원에 따라, 폼이 제출될 때 URL 필드의 값이 자동으로 유효성 검사가 된다.
search	검색창
tel	전화번호 입력
number	숫자 값 입력
range	값이 범위 안에 있어야 하는 입력 필드에 사용 브라우저의 지원에 따라, 슬라이드 컨트롤이라는 바의 형태로 스크롤 표시가 된다.
radio	여러 개의 옵션 중, 단 하나의 옵션을 입력
checkbox	여러 개의 옵션 중, 다수의 옵션을 입력
submit	사용자로부터 입력받은 데이터를 전송하는 버튼
button	사용자가 누를 수 있는 버튼
image	전송 버튼으로 사용될 이미지 텍스트가 아닌 이미지 형태로 된 submit 버튼을 생성하며, 이때 해당 이미지 경로는 src 속성으로 명시해야 한다.
reset	모든 form 요소의 입력 값을 초기값으로 되돌리는 버튼
date	날짜 입력 브라우저 지원에 따라, 날짜 선택기 (date picker)로 표시된다.
week	주와 연도 입력 브라우저 지원에 따라, 날짜 선택기 (date picker)로 표시된다.
month	월과 연도 입력 브라우저 지원에 따라, 날짜 선택기 (date picker)로 표시된다.
time	시간 입력 브라우저 지원에 따라, 시간 선택기 (time picker)로 표시된다.
datetime-local	날짜와 시간 입력 브라우저 지원에 따라, 날짜 선택기 (date picker)와 시간 선택기 (time picker)이 합쳐진 모습으로 표시된다.
hidden	보이지 않는 숨겨진 입력 필드를 정의 폼 제출 시, 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 사용
file	파일 찾기(선택) 버튼
color	색상 입력 브라우저 지원에 따라, 색상 선택기로 표시된다.

<label>

입력 요소 앞이나 뒤에 표시되는 제목을 구성한다.
<label>과 <input>의 순서는 변경될 수 있으며, 반드시 연달아 표시될 필요는 없다.
<label>에 부여한 id 값과 <input>에 부여한 id 값은 연동된다.

<label for="input요소에 부여한 id값">...제목...</label>
<input name="이름(영어)" id="식별자(영어)" type="종류" [value="기본값"] [maxlength="숫자"] [checked] />

radio & checkbox

두 개 이상의 요소가 하나의 그룹으로 묶여야 하므로, name 속성의 값이 동일해야 한다.

<div class="name_form">
    <label for="name">이름</label>
    <input name="name" id="name" type="radio" value="김철수" checked /> 김철수
    <input name="name" id="name2" type="radio" value="홍길동" /> 홍길동
    <input name="name" id="name3" type="radio" value="김수철" /> 김수철
    <input name="name" id="name4" type="radio" value="김영우" /> 김영우
</div>

목록 태그

<select>

항목을 선택할 수 있는 태그로, 속성은 size와 multiple이 있다.
- size: 한 번에 표시할 항목의 수
- multiple: 다중 선택 허용 유무
  - Ctrl이나 Shift키를 누른 상태에서 두 개 이상의 항목을 선택할 수 있는데, Dropdown에서는 잘 되지 않는다.

<option>

<select> 태그 하위에 존재하는 태그로, 목록을 나타내며, 속성으로는 value와 selected가 있다.
- value: 해당 항목이 선택되었을 때, 프로그램이 인식할 내용
- selected: 해당 <option> 요소를 기본적으로 선택
  - 만약, 여러 개의 <option> 요소가 이 속성을 갖고 있다면 맨 마지막 항목이 선택된 상태로 표시

<optgroup>

<select> 태그 안의 <option> 목록들을 그룹화할 때 사용한다.
- <option> 요소들이 이 안에 포함된다.
label 속성을 사용하여 그룹 이름을 지정한다.

<form>
	<select name="age">
        <optgroup label="10대">
            <option value="18">18세</option>
            <option value="19">19세</option>
        </optgroup>
        <optgroup label="20대">
            <option value="20">20세</option>
            <option value="21">21세</option>
            <option value="22">22세</option>
        </optgroup>
    </select>
</form>

파일 첨부

type 속성을 file로 값을 주면, 웹 프로그램으로 파일을 전송할 수 있도록 찾아보기 버튼이 표시된다.
- 한 번에 하나의 파일만 첨부 가능
반드시 <form> 태그에 enctype="multipart/form-data" 속성이 명시되어야 한다.
브라우저의 보안을 위해, 이 요소에서는 value 속성 값 지정이 불가하다.

<form enctpe="multipart/form-data">
    <fieldset>
        <legend>파일첨부</legend>
        <div>
            <label for="photo">사진선택</lable>
            <input type="file" name="photo" id="photo" />
        </div>
    </fieldset>
</form>

데이터 전송

버튼 표시

type 속성에 따라 버튼의 특성이 결정된다.
- submit: 사용자가 입력한 form 요소의 내용들을 웹 프로그램에게 전송
- button: 아무런 동작이 없으며, 일반적으로 JS와 연결하여 특정 동작을 구현
- reset: 사용자가 입력한 모든 내용 초기화
- image: 버튼에 이미지를 표시하며, submit과 동일한 특성
  - value 속성 대신 src 속성 사용

<input type="submit|button|reset|image value="버튼 표시 텍스트" [src="이미지경로"] />

데이터를 웹 프로그램으로 전송

<form> 요소 내의 submit 버튼이 눌러지면, 현재 <form> 요소 안에 사용자가 입력한 모든 내용들이 action 속성에 명시하는 웹 프로그램 페이지로 전송된다.
- 사용자의 입력 값을 전달받은 웹 프로그램은 입력, 수정, 삭제 등의 처리 수행
- 이러한 처리는 ASP, JSP, PHP 등의 웹 프로그램으로 구현
enctype 속성은 입력 양식 안에 파일 첨부 기능이 포함되어 있는 경우, 반드시 지정해야 한다.
method 속성은 전송 방식을 의미한다.
- get: 입력된 모든 내용이 브라우저에 의해 cash 되어 전송
- post: 입력된 내용이 별도로 첨부되어 브라우저에 의해 cash 되지 않고 전송

<form name="form1" method="get" action="result.html">
    <fieldset>
        <legend>이름 입력하기</legend>
        <div>
            <label for="user_name">이름: </label>
            <input type="text" name="user_name" id="user_name" />
        </div>
        <div>
            <input type="submit" value="입력완료">
            <input type="reset" value="다시작성">
            <input type="button" value="일반버튼">
            <input type="image" src="img/ok.png" alt="입력완료">
        </div>
    </fieldset>
</form>

'Study > HTML & CSS' 카테고리의 다른 글

[CSS] 색 (Color) (0)	2022.07.12
[CSS] 기본 셀렉터 (Selector) (0)	2022.07.12
[HTML] 멀티미디어 (0)	2022.07.12
[HTML] 텍스트 (Text) (0)	2022.07.12
[HTML] 테이블 (Table) (0)	2022.07.12

입력 양식 (Form)의 기본 구성

<form> 태그

<input> 태그

<input> 태그의 기본 속성

type 속성 값의 종류

<label>

radio & checkbox

목록 태그

<select>

<option>

<optgroup>

파일 첨부

데이터 전송

버튼 표시

데이터를 웹 프로그램으로 전송

'Study > HTML & CSS' 카테고리의 다른 글

티스토리툴바