HTML 양식 시작을위한 단계별 안내서

HTML 양식

개요

웹 사이트를 방문한 사람으로부터 일부 데이터를 수집하려면 HTML 양식이 필요합니다. 예를 들어 Uber, Netflix 또는 Facebook과 같은 응용 프로그램에 등록 / 로그인하는 경우 HTML 양식을 통해 이름, 전자 메일 및 암호와 같은 정보를 입력합니다.

이제 폼을 만드는 데 필요한 모든 요소를 ​​배웁니다.

참고 : CSS를 사용하여 스타일링을 이미 추가 했으므로 요소가 다르게 보일지 모르지만 정확히 동일한 방식으로 작동합니다.
요소를 내 것처럼 보이게하려면 아래 링크에서 내 CSS 파일을 찾을 수 있습니다.
사용자 정의 CSS : https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
CSS 정규화 :
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

양식 요소

이것이 우리가 배울 첫 번째 요소입니다. 이 요소는 양식 안에있는 다른 모든 요소를 ​​래핑합니다. 이것은 양식 요소입니다.

Google 양식은 서버에 연결되어 있지 않으므로 데이터를 어디에도 제출하지 않습니다. 양식을 서버에 연결하고 데이터를 처리하기 위해 Node, Python, Ruby 또는 PHP와 같은 서버 측 언어를 사용할 수 있습니다. 데이터 처리에는 양식 요소에 첨부 된 두 가지 중요한 속성이 포함됩니다. 이러한 속성을 살펴 보겠습니다.

속성 :

  1. action : action 속성은 양식에서 제출 한 정보를 처리하는 프로그램의 웹 주소 (URL)입니다.
  2. method : 브라우저가 양식을 제출하는 데 사용하는 HTTP 메소드이며 가능한 값은 POST 및 GET입니다.
  • POST — 양식 본문의 데이터가 서버로 전송됩니다.
  • GET — URL 내부로 데이터가 전송되고 매개 변수는 물음표로 구분됩니다.
참고 : 다른 양식 안에는 양식을 중첩 할 수 없습니다. 이는 다른
요소 내에 요소를 가질 수 없음을 의미합니다.

입력 요소

입력 요소는 가장 일반적으로 사용되는 양식 요소입니다. 사용자가 이메일, 비밀번호 등의 정보를 입력 할 수있는 텍스트 필드를 만드는 데 사용됩니다.

사용자가 자신의 이름을 입력 할 수있는 텍스트 필드를 만들어 봅시다.

참고 : 입력 요소는 자체 닫기 태그이므로 시작 태그와 일치시키기 위해 닫기 태그를 입력 할 필요가 없습니다.

위의 입력 태그에 세 가지 속성을 추가했습니다. 각각을 자세히 살펴 보겠습니다.

유형

type 속성은 원하는 입력 유형을 나타냅니다. type 속성에 text 값을 주면 여기서 의미하는 것은 입력 필드에 입력하는 값이 text 유형이라는 것입니다. 이 특정 속성에 가능한 값이 많이 있습니다. 가능한 값은 이메일, 전화, 전화 등입니다.

예 : 모든 계정 (Amazon / Netflix)에 로그인 할 때 이메일과 비밀번호라는 두 가지를 입력해야합니다. 따라서이 특별한 경우에는 입력 요소가 사용됩니다. type 속성은 각각 email 및 password 값으로 제공됩니다.

신분증

ID 속성은 필수는 아니지만 추가하는 것이 좋습니다. 경우에 따라 CSS / JavaScript로 요소를 타겟팅하는 데 도움이됩니다. ID 속성이 추가되어 레이블을 특정 양식 컨트롤에 연결할 수 있습니다.

이름

이름 속성이 필요합니다. 서버 측 코드에 양식을 제출하면 서버는 양식 데이터를 이해하고 값을 적절히 처리 할 수 ​​있습니다.

자리 표시 자

사용자가 값을 입력하기 전에 입력 필드에 표시되는 짧은 힌트입니다. 사용자가 입력 필드에 입력을 시작하면 자리 표시자가 사라집니다.

몇 가지 다른 기본 입력 요소가 어떻게 보이는지 봅시다.

참고 : type 속성에 다른 값을 사용하면 다른 결과가 생성됩니다. 예를 들어 전자 메일, 텍스트 또는 암호 등을 입력 할 수 있습니다. 모두 약간 다른 동작을 표시하므로 아래에 표시됩니다.

여러 입력 요소 (텍스트, 이메일, 비밀번호)

다중 입력 요소 (텍스트, 이메일, 비밀번호)

자리 표시 자 (왼쪽)가없고 자리 표시 자 (오른쪽) 특성이있는 입력 요소

텍스트 영역 요소

때로는 한 줄의 텍스트로 충분하지 않아 간단한 입력 요소가 작동하지 않을 수 있습니다. 예를 들어 일부 웹 사이트에는 사람들이 쿼리 나 메시지를 입력 할 수있는 연락처 양식이 있습니다. 이 경우 textarea 요소를 사용하는 것이 가장 좋습니다.