HTML 양식을 만드는 방법:가이드

HTML 양식은 텍스트 필드, 드롭다운, 확인란 등을 사용하여 사용자로부터 데이터를 수집합니다. HTML 양식은 <form> 태그 및 사용 <input> 태그를 사용하여 요소를 만듭니다.

HTML 양식은 사용자가 웹 사이트 또는 웹 응용 프로그램과 상호 작용할 수 있는 방법을 제공합니다. 웹 양식을 통해 사용자는 웹사이트나 서버에서 처리하고 저장할 수 있는 데이터를 제출할 수 있습니다.

HTML에서 양식을 만드는 방법은 무엇입니까? 이것이 이 튜토리얼에서 우리가 대답할 질문입니다.

이 자습서에서는 HTML 양식의 기본, 양식에 입력 필드를 추가하는 방법, 양식을 사용하여 서버에 데이터를 보내는 방법을 예제를 사용하여 설명합니다. 이 튜토리얼을 마치면 HTML로 양식을 만드는 전문가가 될 것입니다.

HTML 양식

HTML에서 양식 하나 이상의 요소로 구성됩니다. HTML 양식에는 다음 요소가 포함될 수 있습니다.

• 한 줄 텍스트 필드
• 텍스트 상자
• 드롭다운 상자
• 체크박스
• 버튼
• 라디오 버튼

버튼과 텍스트 상자를 제외하고 이러한 요소는 <input> HTML 코드의 태그.

사용자가 양식을 제출한 후 양식의 내용은 다음을 수행할 수 있습니다.

• 추가 처리를 위해 서버로 보내거나
• 웹 브라우저에서 처리됩니다.

HTML로 양식을 작성하기 전에 양식을 디자인하는 방법에 대해 생각해야 합니다. 어떤 데이터를 수집해야 합니까? 양식을 어떻게 단순하게 유지하시겠습니까? 양식이 클수록 사용자가 작성할 가능성이 낮아집니다.

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

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

이 튜토리얼에서는 커피 하우스 웹사이트의 양식을 만들 것입니다. Three Brothers Coffee House에서 웹사이트를 통해 고객 문의를 수락할 수 있는 양식을 디자인해 달라고 요청했다고 가정해 보겠습니다.

우리는 네 가지 정보를 수용하는 양식을 작성해야 합니다. 다음과 같습니다.

• 이름 사용자의
• 사용자의 이메일 주소 .
• 사용자가 방문한 적이 있는지 여부 커피 하우스.
• 메시지 사용자가 커피 하우스로 보내기를 원합니다.

이것은 우리의 양식이 네 가지 요소를 포함해야 함을 의미합니다. 사용자가 양식을 제출할 수 있도록 양식에도 버튼이 하나 필요합니다.

HTML <form> 태그

HTML의 양식은 <form> 안에 포함됩니다. 꼬리표. 다음은 HTML 양식의 예입니다.

<form>
	// Elements
</form>

<form> 태그는 HTML에서 양식을 정의하는 데 사용됩니다. 일단 정의되면 <form> 태그에는 확인란 및 한 줄 텍스트 필드와 같은 양식 요소가 포함될 수 있습니다.

form 요소는 두 가지 속성을 허용합니다. action 및 method . 이 튜토리얼의 뒷부분에서 이러한 속성에 대해 논의할 것입니다.

<input> HTML 양식 요소

대부분의 HTML 양식 컨트롤에는 입력 요소가 포함됩니다. . 이들은 사용자로부터 다양한 유형의 데이터를 수집하는 데 사용됩니다. 입력 요소는 <input>을 사용하여 정의됩니다. 태그.

<input> 방식 웹사이트에 표시되는 요소는 지정된 유형 속성에 따라 다릅니다. 예를 들어 입력 필드가 텍스트 상자인 경우 라디오 버튼과 다르게 표시됩니다.

<input> 구문 요소는 다음과 같습니다.

<input type="type" id="elementId">

이 예에서 <input> 두 가지 속성을 허용합니다. type이라는 첫 번째 속성 , 양식 필드가 허용하는 입력 유형입니다. type 속성에는 많은 값이 있을 수 있지만 가장 일반적인 값은 다음과 같습니다.

• button
• checkbox
• email
• text
• number
• radio

이 예에서 두 번째 속성은 id입니다. . 이 속성은 입력 요소를 고유하게 식별하는 데 사용되며 사용자의 양식 입력을 처리하는 데 사용하는 스크립트에서 사용자가 제출한 데이터에 액세스하는 데 사용됩니다.

삼형제 다방으로 돌아가자. 우리가 구축하는 양식은 사용자에 대한 4가지 정보를 수락해야 합니다. 우리가 수집하고자 하는 처음 두 가지 정보는 사용자의 이름과 이메일 주소입니다.

두 개의 <input>을(를) 사용하여 이러한 정보를 수집할 수 있습니다. 태그:

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name"><br /><br />
	<label for="email">Email:</label><br/>
	<input type="email" id="email" name="email">
</form>

클릭 위의 편집기에서 버튼을 눌러 코드를 실행합니다.

보시다시피 사용자 이름과 사용자 이메일 주소라는 두 가지 값을 허용하는 양식을 만들었습니다. 이 예에서는 <label>도 사용했습니다. 요소. 이 요소에 대해 곧 논의할 것입니다.

name HTML 양식의 속성

HTML 양식의 모든 양식 요소에는 name이 있어야 합니다. 기인하다. 이 속성은 양식의 내용을 제출하는 데 사용됩니다. name을 지정하지 않은 경우 form 요소에 속성이 있는 경우 해당 요소의 내용은 서버에 제출되지 않습니다.

위의 예에서 "이름" 필드에는 name이 있습니다. 값이 name인 속성 , 그리고 "이메일" 필드에는 name이 있습니다. 값이 email인 속성 .

HTML <label> 요소

위의 예에서는 <label>를 사용했습니다. 요소를 사용하여 양식의 각 항목에 HTML 레이블을 추가합니다. <label> 태그를 사용하면 양식 요소의 목적과 허용되는 데이터를 명확하게 설명할 수 있습니다.

<label> 태그를 사용하면 화면 판독기를 사용하는 사용자에게 컴퓨터가 읽을 텍스트를 정의할 수도 있습니다. 스크린 리더가 웹 페이지의 입력 필드를 만나면 레이블을 읽기 때문입니다.

다음은 HTML 레이블의 구문입니다.

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name">
</form>

위의 예에서는 사용자 이름을 수집하는 양식을 만들었습니다. <label>을(를) 사용했습니다. Name: 레이블을 추가하는 태그 양식에. for라는 속성도 지정했습니다. <label> 요소. 이 속성은 id와 같아야 합니다. input에서 사용하는 속성 양식을 해당 레이블에 바인딩하므로 레이블이 연결된 요소입니다.

HTML 양식 요소

삼형제 다방으로 돌아가자. 이 튜토리얼을 시작할 때 우리는 사용자 이름, 이메일 주소, 고객인지 여부, 커피 하우스에 보내고 싶은 메시지의 4가지 정보를 수집하고 싶다고 말했습니다.

지금까지 이름 필드와 이메일 필드의 두 가지 양식 필드를 만들었습니다. 나머지 양식을 만드는 방법에 대해 논의해 보겠습니다.

라디오 버튼

라디오 버튼은 HTML 양식에서 사용되는 일반적인 유형의 입력입니다. 라디오 버튼을 사용하면 제한된 수의 선택 항목에서 하나의 값을 선택할 수 있습니다. 종종 라디오 버튼은 성별 정보, 연령 범위 또는 예/아니오 응답을 수집하는 양식에 사용됩니다.

다음은 라디오 버튼의 구문입니다.

<input type="radio" name="radio_button">

우리 양식에서 사용자가 Three Brothers Coffee House의 고객인지 묻고 싶습니다. 라디오 버튼을 사용하여 이 작업을 수행할 수 있습니다. 이를 위해 사용할 코드는 다음과 같습니다.

<form>
  <p>Are you a customer of the Three Brothers Coffee House?</p>
  <input type="radio" id="yes" name="customer" value="yes">
  <label for="yes">Yes</label><br />
  <input type="radio" id="no" name="customer" value="no">
  <label for="no">No</label><br />
</form>

클릭 위의 편집기에서 버튼을 눌러 코드를 실행합니다.

그런 다음 사용자는 다음 두 값 중 하나를 제출할 수 있습니다. yes 또는 no .

코드를 분해해 보겠습니다. 먼저 <form>을 정의합니다. . 그런 다음 <p>를 사용합니다. 태그를 사용하여 사용자에 대한 설명 텍스트를 추가합니다.

다음 줄에서 값이 yes인 라디오 버튼을 만듭니다. . 그런 다음 "예"라는 텍스트를 표시하는 이 버튼에 대한 레이블을 만듭니다. 다음으로 값이 no인 라디오 버튼을 만듭니다. "아니오"라는 텍스트를 표시하는 해당 버튼에 대한 레이블을 만듭니다.

코드에서 라디오 버튼에는 value가 있습니다. 속성이 지정되었습니다. 이 값은 사용자가 양식을 제출할 때 서버로 보낼 데이터입니다. 따라서 사용자가 "예" 라디오 버튼을 클릭하면 yes 값이 서버로 전송됩니다.

HTML <textarea> 요소

양식에 추가하려는 입력 요소가 하나 더 있습니다. 바로 텍스트 영역입니다. 지금까지 사용자의 이름, 이메일 주소, 고객인지 여부를 수집했습니다. 이제 우리는 그들이 커피 하우스에 메시지를 보낼 수 있도록 하는 양식 요소를 추가하려고 합니다.

<textarea>를 사용하여 그렇게 할 수 있습니다. 다음과 같은 요소:

<form>
	<label for="message">Message:</label><br />
	<textarea id="message" name="message">
	What message do you want to send to the Three Brothers Coffee 	House?
	</textarea>
</form>

코드에서 label을 정의하는 것으로 시작합니다. "Message:" 값을 표시합니다.

그런 다음 <textarea>를 사용하여 텍스트 영역을 정의합니다. 꼬리표. 이 텍스트 영역에 대해 두 가지 속성을 지정합니다.

1. id . 이것은 사용자가 응답을 제출한 후 양식의 내용을 참조하는 데 사용됩니다.
2. name . 이는 양식의 내용을 제출하는 데 필요합니다.

마지막으로 What message do you want to send to the Three Brothers Coffee House?라는 메시지를 추가합니다. 열기와 닫기 <textarea> 사이 태그. 사용자에게 표시되는 기본 메시지입니다.

코드 결과는 다음과 같습니다.

클릭 위의 편집기에서 버튼을 눌러 코드를 실행합니다.

이제 텍스트 영역 필드가 있습니다. 사용자는 이 필드를 활용하여 커피 하우스에 메시지를 제출할 수 있습니다.

HTML submit 버튼

이제 양식의 내용을 정의했으므로 submit를 추가할 준비가 되었습니다. 단추. submit 구문은 다음과 같습니다. 버튼:

<input type="submit" value="Submit">

submit 버튼은 양식의 내용을 양식 처리기에 제출하는 데 사용됩니다. (양식 핸들러는 일반적으로 양식의 내용을 처리할 수 있는 웹 서버의 페이지입니다.) submit 버튼은 폼 핸들러로 연결됩니다. <form>을 사용하여 양식 처리기를 지정해야 합니다. 태그의 action 기인하다.

submit를 추가한다고 가정해 보겠습니다. 커피 하우스에 대한 웹 양식에 버튼을 클릭합니다. 다음 코드를 사용하여 수행할 수 있습니다.

<form action="/post.php">
    <label for="name">Name:</label>
    <br/>
    <input type="text" id="name" name="name">
    <br />
    <br />
    <label for="email">Email:</label>
    <br />
    <input type="email" id="email" name="email">
    <br />

    <p>Are you a customer of the Three Brothers Coffee House?</p>
    <input type="radio" id="yes" name="customer" value="yes">
    <label for="yes">Yes</label>
    <br />
    <input type="radio" id="no" name="customer" value="no">
    <label for="no">No</label>
    <br /><br />

    <label for="message">Message:</label><br />
    <textarea id="message" name="message">
    What message do you want to send to the Three Brothers Coffee House?
    </textarea>

    <input type="submit" value="Submit">
</form>

보시다시피 양식에 제출 버튼을 추가했습니다. action도 지정했습니다. <form>의 매개변수 꼬리표. 이 매개변수는 해당 내용을 처리할 파일에 양식을 연결합니다.

웹 양식 제출

HTML 양식을 만든 후에는 사용자가 양식을 통해 제출하는 데이터를 처리할 핸들러를 만들어야 합니다. <form> 요소는 양식 데이터를 서버로 보내는 데 사용되는 두 가지 속성을 제공합니다. action 및 method .

양식 action 속성

action 속성은 양식 처리기 코드의 위치를 ​​정의합니다. 양식이 제출될 때 - 사용자가 submit을 클릭할 때 버튼 - 수집한 데이터가 양식 처리기로 전송됩니다.

위의 예에서 양식이 제출되면 양식의 데이터가 post.php 페이지로 전송됩니다. , 여기에는 양식 처리기 코드가 포함됩니다. 다음은 action이 있는 양식의 예입니다. 정의된 속성:

<form action="/post.php">
</form>

action이 없는 경우 속성이 지정되면 양식이 현재 페이지에 제출됩니다.

양식 method 속성

method 속성은 양식이 제출될 때 사용해야 하는 HTTP 메소드를 나타냅니다. 기본적으로 양식은 GET를 사용합니다. 방법이지만 POST와 같은 다른 HTTP 방법을 사용할 수도 있습니다. .

다음은 method 형식의 예입니다. 작동 중인 속성:

<form action="/post.php" method="POST">
</form>

이 양식이 제출되면 수집된 데이터는 HTTP POST를 사용하여 서버로 전송됩니다. 방법. (또는 GET 요청, 우리는 "GET"을(를) 지정할 수 있었습니다. 또는 GET 때문에 공백으로 두었습니다. 기본 방법입니다.)

대부분의 경우 HTTP POST를 사용해야 합니다. 데이터를 제출하는 방법. GET이기 때문입니다. 이 메서드는 페이지의 주소 필드에 양식 데이터를 표시합니다. 따라서 "Pauline" 값이 포함된 "name" 필드와 함께 post.php에 양식을 제출했다면 다음이 웹사이트에 제출되었을 것입니다.

/post.php?name=Pauline

안전하지 않은 데이터 전송 방법입니다. GET 민감한 정보를 취급하는 경우 이 방법을 사용하면 안 됩니다.

결론

양식은 사용자 데이터를 수집하고 처리할 수 있는 HTML의 중요한 기능입니다.

이 자습서에서는 예제를 사용하여 HTML 양식의 기본 사항과 첫 번째 웹 양식을 만드는 방법에 대해 설명했습니다. 이제 전문가처럼 HTML 양식을 디자인하고 개발할 준비가 되었습니다!