Original article: HTML Form – Input Type and Submit Button Example
폼은 웹에서 가장 중요한 부분 중 하나입니다. 데이터를 수집하고 리소스를 검색하거나 중요한 정보를 받기 위해 회원가입 하는 경우 폼을 이용하면 가장 쉽습니다.
여러분은 HTML form 요소를 사용해 웹사이트에 폼을 포함할 수 있습니다. 폼 요소 내부에는 여러 가지 입력이 중첩되어 있습니다. 이러한 입력들은 폼 컨트롤이라고도 합니다.
이 튜토리얼에서는 HTML 폼 요소, 다양한 입력 유형 및 데이터를 제출하는 제출 버튼을 만드는 방법에 관해 설명합니다.
마지막에는 폼이 어떻게 작동하는지 알게 되고 자신있게 폼을 만들 수 있을 것입니다.
기본 HTML 폼 구문
<form action="mywebsite.com" method="POST">
<!--Input of any type and textareas goes in here-->
</form>
기본 HTML 폼 입력 유형
HTML에서 다양한 폼 컨트롤을 만들기 위해 input 태그를 사용합니다. 이 태그는 인라인 요소이며 type, name,minLength,maxLength,placeHolder 등과 같은 속성을 사용합니다. 이렇게 각각의 속성에는 사용하는 특정한 값을 가집니다.
placeHolder 속성의 경우, 사용자가 항목을 입력하기 전에 입력 필드의 목적을 이해하는 데 도움이 되므로 중요합니다.
그럼, 입력 유형은 20가지가 있으며 하나씩 살펴보겠습니다.
텍스트 유형
이 유형의 입력은 "text" 값을 사용하며, 한 줄의 텍스트 입력을 만듭니다.
<input type="text" placeholder="Enter name" />
텍스트 유형의 입력은 아래 스크린샷과 같습니다:
비밀번호 유형
이름에서 알 수 있듯이, 이 유형을 입력하면 비밀번호가 생성됩니다. 그리고 자바스크립트로 조작하지 않는 한, 사용자가 자동으로 입력값을 볼 수 없습니다.
<input type="password" placeholder="Enter your password" />
이메일 유형
이메일 유형의 모든 입력은 이메일 주소를 입력하기 위한 필드를 정의합니다.
<input type="email" placeholder="Enter your email" />
숫자 유형
이 입력 유형을 사용하면 숫자만 입력할 수 있습니다.
<input type="number" placeholder="Enter a number" />
라디오 유형
때에 따라 사용자는 다양한 옵션 중 하나를 선택해야 합니다. 유형 속성이 "radio"로 설정된 입력 필드를 사용하면 이 작업을 수행할 수 있습니다.
<input type="radio" />
체크박스 유형
앞서 언급했다시피, 라디오 입력 유형을 통해 사용자는 다양한 옵션 중 하나를 선택할 수 있습니다. 하지만 다양한 옵션을 선택하고자 한다면 어떻게 해야 할까요? 이때, checkbox유형 속성을 사용하면 됩니다.
<input type="checkbox" />
제출 유형
이 유형을 사용하여 폼에 제출 버튼을 추가합니다. 사용자가 버튼을 클릭하면, 폼이 자동으로 제출됩니다. 값 속성을 사용해 버튼 안의 텍스트를 정의합니다.
<input type="submit" value="Enter to Win" />
버튼 유형
버튼으로 설정된 유형의 입력은 자바스크립트의 onClick 이벤트 리스너 유형으로 조작할 수 있는 버튼을 만듭니다. 기본적으로 이 유형은 값이 비어 있으므로 값을 지정해야 한다는 점을 제외하고는 제출 입력 유형과 동일한 버튼을 만듭니다.
<input type="button" value="Submit" />
파일 유형
이 유형은 파일 제출을 위한 필드를 정의합니다. 사용자가 클릭하면, 원하는 파일 형식(이미지, PDF, 문서 파일 등)을 삽입하라는 메시지가 나타납니다.
<input type="file" />
파일 입력 유형의 결과는 다음과 같습니다:
색상 유형
이는 HTML5에서 소개된 화려한 입력 유형입니다. 예를 들어, 사용자는 자신이 가장 좋아하는 색상을 제출할 수 있습니다. 검은색(#000000)이 기본값이지만, 원하는 색의 값으로 재정의할 수 있습니다.
많은 개발자가 RGB, HSL 및 영숫자 형식으로 사용할 수 있는 다양한 색조를 선택하기 위한 속임수로 이 기능을 사용합니다.
<input type="color" />
색 입력 유형의 결과는 다음과 같습니다.
검색 유형
검색 유형이 있는 입력은 텍스트 입력 유형과 마찬가지로 텍스트 필드를 정의합니다. 하지만 이 유형은 정보를 검색하는 것일 유일한 목적입니다. 사용자가 입력을 시작하면 취소 버튼이 나타난다는 점에서 텍스트 유형과 다릅니다.
<input type="search" />
URL 유형
입력 태그의 유형 속성을 URL로 설정하면, 사용자가 URL을 입력할 수 있는 필드가 표시됩니다.
<input type="url" />
전화 유형
전화 유형을 사용하여 사용자로부터 전화번호를 수집할 수 있습니다.
<input type="tel" />
날짜 유형
당신은 특정 이벤트의 날짜를 요청한 웹사이트에 등록한 적이 있을 겁니다. 그 웹사이트에서 이 값을 얻기 위해 날짜로 설정된 유형 값이 있는 입력을 사용했을 것입니다.
<input type="date" />
날짜 유형이 있는 입력은 다음과 같습니다:
Datetile-local 유형
이 입력 유형은 날짜 유형처럼 작동하지만, 사용자가 특정 시간의 날짜를 선택할 수도 있습니다.
<input type="datetime-local" />
주 유형
이 입력 유형을 사용하면 특정 주를 선택할 수 있습니다.
<input type="week" />
월 유형
월 유형의 입력은 사용자가 클릭했을 때 선택할 수 있는 월을 채웁니다.
<input type="month" />
텍스트 영역
사용자가 텍스트 입력 유형에 적합하지 않은 여러 줄의 텍스트를 입력해야 하는 경우가 있습니다(텍스트 입력 유형은 한 줄 텍스트 필드를 지정하기 때문에).
텍스트 영역을 사용해 여러 줄의 텍스트 입력을 정의할 때 이 작업을 수행할 수 있습니다. 텍스트 영역의 고유한 속성으로, 행 수에 대해 cols, 열 수에 대해 rows가 있습니다.
<textarea cols="50" rows="20"></textarea>
다중 선택 박스
smoothjjuu marked this conversation as resolved.
이것은 하나의 패키지에 라디오 버튼과 체크박스가 있는 것과 같습니다. 선택 요소와 옵션의 두 가지 요소가 페이지에 포함돼 있으며, 옵션은 항상 선택 요소 내부에 중첩되어 있습니다.
기본적으로 사용자는 옵션 중 하나만 선택할 수 있습니다. 그러나 여러 속성을 사용하면, 사용자가 둘 이상의 옵션을 선택할 수 있습니다.
<select>
<option value="HTML">Select a Language</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>
HTML 입력에 레이블 지정 방법
폼 컨트롤에 레이블을 할당하는 것은 중요합니다. for와 id 속성을 통해 입력 필드에 올바르게 연결되면, 사용자가 레이블 자체를 클릭해 입력에 접근할 수 있으므로 사용하기가 더 쉽습니다.
<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />
HTML 폼 작동 방법
사용자가 폼을 작성하고 제출 버튼으로 제출하면, 폼 컨트롤의 데이터가 GET 또는 POST HTTP 요청 메소드를 통해 서버로 전송됩니다.
그럼, 서버에 어떻게 표시될까요? 폼 요소는 서버의 URL에 지정해야 하는 액션 속성을 사용합니다. 또한, 서버에 값을 전달하는 데 사용하는 지정된 HTTP 메소드 속성도 사용합니다.
이 메소드는 GET 혹은 POST가 될 수 있습니다. GET 메소드를 사용해, 데이터가 제출되면 사용자가 입력한 값이 URL에 표시됩니다. 그러나 POST를 사용하면, 값이 HTTP 해더에 전송되므로 해당 값이 URL에 표시되지 않습니다.
만약 메소드 속성이 폼에서 사용되지 않으면, 자동으로 디폴트인 GET 메소드를 사용하려는 것으로 간주합니다.
그렇다면 언제 GET 혹은 POST 메소드를 사용해야 할까요? 중요하지 않은 데이터를 제출하거나, 서버에서 데이터를 검색하려면 GET 메소드를 사용합니다. 중요한 데이터나 파일을 제출할 때는 POST 요청을 사용합니다.
미니 프로젝트: 기본 연락처 폼 만들기
이제 폼에 대해 배운 내용을 가지고 간단한 연락처 폼을 만들어 보겠습니다. 그리고 이 모든 것을 정리하면서 몇 가지 새로운 개념을 소개하겠습니다.
HTML 코드는 아래와 같습니다:
<form action="example-server.com">
<fieldset>
<legend>Contact me</legend>
<div class="form-control">
<label for="name">Name</label>
<input type="name" id="name" placeholder="Enter your name" required />
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="Enter your email"
required
/>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea
id="message"
cols="30"
rows="10"
placeholder="Enter your message"
required
></textarea>
</div>
<input type="submit" value="Send" class="submit-btn" />
</fieldset>
</form>
HTML 코드에서 무슨 일이 일어나고 있습니까?
첫째, 폼 요소는 다른 모든 요소를 감쌉니다. 폼 데이터를 수신할 더미 서버인 "example-server.com"으로 설정된 액션이 있습니다.
폼 요소 다음, 다른 모든 요소도 바로 아래에 legend 태그가 있는 fieldset 요소로 둘러싸여 있습니다.
fieldset 요소를 사용해 관련 입력을 그룹화하고, legend 태그에는 폼이 무엇에 관한 것인지를 전달하는 캡션이 포함되어 있습니다.
name, email 그리고 textarea 입력 모두 폼 컨트롤 클래스가 있는 div에 있습니다. 따라서 CSS로 스타일링을 쉽게 하기 위해 블록 요소처럼 작동합니다.
또한 필수 속성으로 검증되므로, 해당 필드가 비어 있거나 사용자가 적절한 형식으로 값을 입력하지 못하면 양식이 제출되지 않습니다.
결과는 아래 스크린샷에서 확인할 수 있습니다:
스타일링 없는 HTML은 너무 안 예쁘네요. 그럼, 이제 스타일링을 적용해 보겠습니다!
CSS는 아래와 같습니다:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: cursive;
}
input,
textarea {
width: 100%;
padding: 5px;
outline: none;
}
label {
line-height: 1.9rem;
}
input[type="submit"] {
transform: translate(2.2%);
padding: 3px;
margin-top: 0.6rem;
font-family: cursive;
font-weight: bold;
}
fieldset {
padding: 20px 40px;
}
CSS 코드 분석하기
Flexbox를 이용해 body의 모든 것을 수평으로, 뷰포트 높이를 100% 수직으로 중앙에 배치합니다. 그리고 font-family로 cursive 폰트를 사용했습니다.
입력과 텍스트 영역을 100% 너비로 지정해 모든 영역을 가로지르게 했습니다. 레이블은 최소 line-height로 1.9 rem(30.4px)으로 각각의 입력에 너무 가깝게 유지되지 않도록 헸습니다.
버튼(입력 타입 버튼)을 transform 속성으로 스타일을 지정해, 중앙에서 약간 벗어난 것처럼 중앙으로 밀어 넣었습니다. 3px의 padding을 주어 더 많은 간격을 두었고, font-family로 cursive를 font-weight는 bold로 굵게 선택했습니다.
버튼이 textarea에 너무 가깝기 때문에, margin-top을 0.6 rem으로 설정해 약간 아래로 밀었습니다.
fieldset 요소에 위쪽과 아래쪽에 20px의 padding을 지정했으며, 왼쪽과 오른쪽에 40px를 주어 감싸고 있는 폼 요소 주위에 생성된 테두리를 밀어냅니다.
결국에는 아래와 같은 아름다운 형태를 보이게 됩니다.
결론
이 튜토리얼이 폼이 어떻게 작동하는지를 이해하는 데 도움이 됐기를 바랍니다. 이제 이 글을 완독한 당신은 웹사이트에 데이터 수집을 시작할 수 있는 폼에 대한 지식을 갖췄습니다.
그럼 읽어주셔서 감사합니다. 즐거운 코딩 하세요.