폼(Form) 태그(1) - input
HTML에서의 폼(Form)은 사용자의 정보를 입력받기 위해 사용됩니다.
예를 들어 회원가입 페이지에서 이름,아이디,비밀번호,주소 등등 데이터를 입력받도록 형식이 지정되어 있는데요,
이때 입력받는 데이터들의 묶음을 폼(Form), 그리고 데이터를 폼 데이터(Form Data) 또는 필드(Field)라고 합니다.
action, method 속성
보통 폼 태그는 사용자로부터 입력받은 데이터를 서버와 통신할때 사용합니다. 따라서 action 속성과 method 속성이 자주 사용됩니다.
action: 양식 데이터를 처리할 서버 프로그램 URImethod: 양식을 제출할때 사용할 HTTP 메서드
label 태그, Input 태그
<input> 태그
폼 태그에서 데이터를 입력받을 수 있습니다. type 속성을 통해 다양한 방법으로 데이터를 입력받을 수 있습니다.
type 속성에는 다양한 타입을 지정할 수 있으며, HTML5에서는 text 필드가 데이터 용도에 맞게 사용할 수 있도록 다양한 타입이 추가되었습니다.
email: email 데이터를 받기 위해 사용됩니다.(이메일 유효성 검증)tel: 전화번호 데이터를 받기 위해 사용됩니다.(모바일 접근시 키패드가 다름)
이외에도 다양한 type 속성이 있습니다.
<label> 태그
label 태그는 입력받는 필드를 설명할때 사용됩니다.
사용방법은 label 태그 하위에 input 태그를 위치시키거나, id와 for 속성을 사용하여 input 태그와 연결할 수 있습니다.
<!-- label 태그 하위 -->
<label>
이름:
<input type="text" id="name">
</label>
<!-- for와 id 속성으로 연결 -->
<label for="name">
이름:
</label>
<input type="text" id="name">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Input</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Input tag</legend>
<ul>
<li>
<label for="text">Text</label>
<input type="text" id="text" required />
</li>
<li>
<label for="email">email</label>
<input type="email" id="email" />
</li>
</ul>
</fieldset>
<input type="submit" value="제출하기" />
</form>
</body>
</html>
폼 태그를 통해 텍스트와 이메일을 받을 수 있는 폼을 만들어 보았습니다.
required 속성
input 태그의 required 속성은 해당 데이터를 필수값으로 받도록 만들어줍니다.
현재 Text 부분이 require 속성으로 지정되어있기 때문에 해당 필드를 채우지않고 제출할 시 "이 입력란을 작성하세요." 와 같은 문구와 함께 폼이 제출되지 않습니다.
email 타입
마찬가지로 email 타입은 서버로 데이터를 전송하기 전에 해당 데이터가 이메일 형식에 맞는지 유효성 체크를 해줍니다.
기타 타입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Input</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Input tag</legend>
<ul>
<li>
<label for="text">Text</label>
<input type="text" id="text" required />
</li>
<li>
<label for="email">email</label>
<input type="email" id="email" />
</li>
<li>
<label for="tel">전화번호</label>
<input type="tel" id="tel" />
</li>
<li>
<label for="url">url</label>
<input type="url" id="url" />
</li>
<li>
<label for="number">number</label>
<input type="number" id="number" min="5" max="10" />
</li>
<li>
<label for="range">range</label>
<input type="range" id="range" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>날짜관련</legend>
<ul>
<li>
<label for="date">date</label>
<input type="date" id="date" min="2025-01-01" max="2025-02-01" />
</li>
<li>
<label for="month">month</label>
<input type="month" id="month" />
</li>
<li>
<label for="week">week</label>
<input type="week" id="week" />
</li>
<li>
<label for="time">time</label>
<input type="time" id="time" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>그 외</legend>
<ul>
<li><input type="file" multiple /></li>
<li><input type="hidden" /></li>
</ul>
</fieldset>
<input type="submit" value="제출하기" />
</form>
</body>
</html>
Text나 email 타입 외에도 다양한 타입이 존재합니다. 각 타입은 해당 타입에 맞게 데이터를 받을 수 있도록 유효성을 체크해주기 때문에 input 태그 생성시에 type 속성을 잘 고려해서 만들어줘야 합니다.
참고: input 속성값
-required: 입력값이 필수임을 명시.
-readonly: 필드를 읽기전용으로 만들 수 있음.
-disabled: 해당 필드를 비활성화 시켜 서버로 데이터를 전송하지 않음.
-autofocus: 초기에 해당 필드에 커서를 위치 시킬 수 있음.
-placeholder: 입력 필드가 비어있을때 나타나는 설명문구 삽입.
