HTML 입력:단계별 가이드

<form>
	... Form elements ...
</form>

태그 내부는 양식 내부의 요소가 저장되는 곳입니다. 양식 요소에는 텍스트 필드, 제출 버튼, 라디오 버튼, 여러 줄 텍스트 상자 및 HTML에서 허용되는 기타 유형의 입력 데이터가 포함될 수 있습니다.

HTML 입력

요소는 방문자가 데이터를 제출할 수 있는 양식 필드를 정의합니다. 은 날짜 선택기, 확인란, 버튼 및 파일 업로더와 같은 필드를 지원합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

요소의 구문은 다음과 같습니다.

<input type="inputType">

요소는 여러 속성을 허용하지만 지정해야 하는 주요 속성은 유형 속성입니다. type 속성을 지정하지 않으면 요소가 웹 페이지에 나타나지 않습니다. 이는 요소가 기본적으로 비어 있기 때문입니다.

HTML 태그가 작동하는 방식을 보여주기 위해 몇 가지 예를 살펴보겠습니다.

우리는 지역 샌드위치 및 샐러드 가게인 Sue's Salad를 위한 양식을 만들어 달라는 요청을 받았습니다. 이 양식을 통해 고객은 매장에서의 경험을 기반으로 피드백을 제출할 수 있습니다. 작성 요청을 받은 양식은 다음을 수락해야 합니다.

• 고객의 이름(텍스트)
• 고객이 매장의 로열티 프로그램 가입자인지 여부를 나타내는 체크박스(체크박스)
• 매장에서의 고객 경험을 기반으로 한 1-5 등급(숫자)

HTML 입력 유형

태그는 다양한 입력 유형을 허용합니다. "type" 속성을 사용하여 입력 유형을 지정합니다. 일반적인 입력 유형에는 버튼, 날짜 선택기, 비밀번호 필드 및 텍스트 필드가 있습니다.

다음은 태그와 함께 사용되는 일반적인 양식 제어 입력 유형의 간단한 목록입니다.

• 버튼
• 파일
• 확인란
• 비밀번호
• 숫자
• 라디오
• 제출
• 텍스트(텍스트 입력 유형)
• URL
• 날짜(날짜 및 시간 선택기)
• 이미지
• 이메일(이메일 주소 입력 제어)

입력 유형 HTML 예제

HTML 태그

텍스트 필드

요소는 HTML에서 텍스트 필드를 만드는 데 사용됩니다. 고객에게 이름을 묻는 텍스트 필드를 생성한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<input type="text" placeholder="What is your name?">

우리 코드에서는 두 개의 속성이 있는 텍스트 필드를 만들었습니다. type 속성은 text로 설정되어 있는데, 이는 우리의 양식이 텍스트 입력을 받아들일 수 있다는 것을 의미합니다. placeholder 속성에는 What is your name? 값이 할당됩니다.

이 텍스트는 사용자가 필드에 텍스트를 입력하기 시작할 때까지 자리 표시자 값으로 표시됩니다.

코드 반환:

<input type="text" placeholder="What is your name?">

보시다시피 What is your name? 자리 표시자 값으로 텍스트 필드를 만들었습니다.

확인란

HTML에서 체크박스는 체크박스 유형의 입력으로 마크업됩니다.

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

이 코드는 "예"라는 텍스트를 표시하는 확인란 버튼을 만듭니다. 확인란을 클릭하면 강조 표시됩니다.

체크박스에는 "우리 로열티 프로그램의 가입자입니까?"라는 레이블이 있습니다. 레이블을 클릭하면 확인란이 토글됩니다. 레이블 입력 유형은 독자가 양식의 내용을 쉽게 찾을 수 있도록 하므로 접근성에 필수적입니다.

HTML 레이블에 대해 자세히 알아보려면 HTML 태그에 대한 가이드를 읽어보세요.

확인란에는 여러 속성이 연결되어 있습니다.

• 유형 속성. 입력 유형을 체크박스로 설정해야 합니다.
• ID. 파일에 고유해야 하는 ID를 기억하십시오.
• 이름과 가치. 이름과 값은 양식이 제출된 후 수집되는 데이터를 처리할 수 있도록 할당하는 데 유용합니다.
• 확인했습니다. checked 속성은 아무 것도 할당되지 않기 때문에 부울 속성으로 알려져 있습니다. 체크하면 자동으로 true로 설정됨을 의미합니다. 기본값은 false이므로 확인란을 선택하려는 경우에만 설정하면 됩니다.

라디오 버튼

요소는 HTML에서 라디오 버튼을 만드는 데 사용됩니다.

"라디오 버튼"이라는 용어는 이상하게도 자동차 산업에서 유래했습니다. 카 스테레오에는 한 번에 하나의 버튼만 누를 수 있는 물리적 버튼이 있었습니다. 다른 선택을 누르면 이전 버튼이 선택 해제됩니다.

확인란을 사용하는 것과 라디오 버튼 세트를 사용하는 것의 차이점은 라디오 버튼을 사용하면 하나의 선택 항목만 선택할 수 있다는 것입니다. 선택을 확인한 후에 나머지 버튼은 비활성화되므로 둘 이상의 라디오 버튼을 선택할 수 없습니다. 반면에 확인란은 여러 항목을 선택할 수 있습니다.

확인란 입력을 라디오 버튼 입력으로 변경하려면 두 가지 작업을 수행해야 합니다. 먼저 입력 유형을 라디오로 변경합니다. 마지막으로 모든 라디오 버튼에서 이름 값이 일치하는지 확인하십시오. 이것은 하나가 선택될 때 나머지 버튼을 비활성화하는 것입니다.

사용자가 Sue 's Salad의 고객 충성도 프로그램 가입자인지 묻는 필드를 만들고 싶다고 가정 해 봅시다. 다음 코드를 사용하여 필드를 만들 수 있습니다.

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes" />
<label for="no">No</label>
<input type="radio" value="no" id="no" />

코드 반환:

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes">
<label for="no">No</label>
<input type="radio" value="no" id="no">

코드에서 두 개의 라디오 버튼을 만들었습니다. 첫 번째 라디오 버튼에는 Yes라는 레이블이 지정되고 값은 yes입니다. 두 번째 라디오 버튼에는 No라는 레이블이 할당되고 값은 no입니다.

숫자 필드

요소는 형식의 숫자 입력을 허용하는 데 사용됩니다.

Sue's Salad의 고객에게 매장에서의 경험을 평가하도록 요청하는 양식을 만들고 싶다고 가정합니다. 고객은 1에서 5 사이의 숫자 등급을 부여해야 합니다. 다음 코드를 사용하여 이 데이터를 수집하는 웹 양식을 만들 수 있습니다.

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5" />

코드 반환:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5">

1에서 5 사이의 숫자를 허용하는 양식 필드를 만들었습니다. 이 필드는 숫자만 허용할 수 있습니다. 사용자가 필드에 텍스트를 입력하려고 하면 텍스트가 처리되지 않습니다.

또한 이 양식 필드에는 숫자 유형이 있으므로 상자 안에 두 개의 작은 화살표가 나타납니다. 위쪽 화살표를 클릭하면 필드의 값이 1 증가합니다. 아래쪽 화살표를 클릭하면 필드의 값이 1 감소합니다.

결론

HTML 태그는 양식에서 사용자 입력을 수락하는 데 사용됩니다. 태그는 숫자 값, 텍스트, 날짜, 예/아니오 응답 및 기타 유형의 데이터를 허용하는 데 사용할 수 있습니다.

이 자습서에서는 예제를 참조하여 HTML 태그를 사용하는 방법과 태그와 함께 사용할 수 있는 속성에 대해 설명했습니다. 이제 태그를 사용하여 HTML 전문가와 같은 양식 필드 요소를 만들 준비가 되었습니다!

HTML에 대해 자세히 알아보려면 HTML 학습 방법에 대한 전체 가이드를 확인하세요.