Home-theater-designers
웹 사이트 사용자로부터 데이터를 수집하는 것은 여러 가지 방법으로 수행할 수 있습니다. 웹사이트의 양식은 사용자가 뉴스레터를 구독하는 것과 같은 단순한 기능을 가질 수도 있고 입사 지원 양식과 같은 보다 복잡한 목적을 가질 수도 있습니다.
그러나 이러한 단순하거나 복잡한 양식이 모두 공통적으로 갖고 있는 한 가지는 HTML, 보다 구체적으로는 HTML입니다. 꼬리표.
양식 태그 사용
NS 태그는 양식의 빌딩 블록으로 간주될 수 있는 다른 요소를 묶는 컨테이너로 사용되는 HTML 요소입니다. 이러한 기본 요소 중 일부는 다음과 같습니다. 태그, 태그 및 꼬리표.
NS 태그에는 기능에 기여하는 중요한 속성이 있습니다. 이 속성을 action이라고 하며 양식에 입력된 데이터가 전달될 파일을 식별하는 데 사용됩니다.
태그 예제 사용
위의 예는 프로젝트에서 form 태그를 사용하는 방법을 보여줍니다. 주요 내용 중 하나는 양식 태그를 열면 닫는 것을 기억해야 한다는 것입니다. 이렇게 하면 양식 구조가 생성되고 양식에 입력된 데이터가 올바르게 처리되는지도 확인할 수 있습니다.
태그 사용
NS 태그는 양식의 각 입력 필드에 있는 데이터를 설명하는 데 사용됩니다. 이 태그에는 ~을위한 양식의 기능을 향상시키는 데 사용되는 속성입니다.
관련된: 코드 테스트를 위한 최고의 무료 온라인 HTML 편집기
해당 입력 필드에 할당된 id가 일치하는 경우 ~을위한 값 태그를 클릭하면 해당 입력 필드가 레이블을 클릭할 때 자동으로 강조 표시됩니다.
태그 예제 사용
First Name:
위의 예에서 ~을위한 속성에 값이 할당됨 fname . 따라서 다음을 사용하여 입력 필드를 생성하면 fname id를 클릭할 때마다 이 필드가 강조 표시됩니다. 첫 번째 이름 상표.
태그 사용
가장 기본적인 형태로, 태그는 텍스트 상자로 볼 수 있습니다. NS 태그는 사용자로부터 데이터를 캡처하며 더 중요한 기능 중 하나는 유형 기인하다. NS 유형 속성은 이 텍스트 상자가 수집할 수 있는 데이터 유형을 나타냅니다.
관련된: CSS에서 스택 양식을 만드는 방법
할당할 수 있는 몇 가지 다른 값이 있습니다. 유형 속성이지만 더 인기 있는 속성은 다음과 같습니다.
- 텍스트
- 숫자
- 이메일
- 영상
- 날짜
- 체크박스
- 라디오
- 비밀번호
태그 사용 예
First Name:
NS 위 코드의 태그에는 각각 고유한 기능을 가진 세 가지 속성이 있습니다. NS 유형 속성에는 텍스트 상자가 문자만 허용함을 의미하는 텍스트 값이 할당됩니다.
NS ID 속성은 텍스트 상자의 고유 식별자이며 CSS 파일에서 이 요소에 대한 액세스를 제공하기 때문에 중요합니다. NS 이름 속성은 고유 식별자이기도 합니다. 그러나 name 속성은 개발의 서버 측 요소와 상호 작용하는 데 사용됩니다.
NS ID 그리고 이름 속성은 일반적으로 하나는 클라이언트 측에서 요소에 대한 액세스를 제공하고 다른 하나는 서버 측에서 요소에 대한 액세스를 제공하는 것과 동일한 값을 할당합니다.
확인란 요소 사용
확인란 요소는 함께 사용할 수 있는 다른 요소와 비교하여 매우 고유합니다. 꼬리표. 사용자는 관련 선택 목록에서 하나 이상의 옵션을 선택할 수 있습니다. 확인란은 선택 시 확인 표시가 있는 작은 사각형 상자로 표시되기 때문에 쉽게 식별할 수 있습니다.
체크박스 요소 사용 예
Programming Languages:
Java
JavaScript
Python
위의 예에서 각 체크박스 요소에는 값 속성이 있으며 이는 컬렉션에서 각 체크박스 옵션을 구별하는 데 도움이 되기 때문에 중요합니다. 따라서 사용자가 위의 옵션에서 'Java'를 선택하면 데이터에 반영됩니다.
태그 및 라디오 요소 사용
NS 태그와 라디오 요소는 사용자가 한 번에 하나의 값만 선택할 수 있다는 점에서 유사합니다. 따라서 동일한 기능을 가지고 있다고 말할 수 있습니다. 그러나 그들은 외관이 매우 다릅니다.
라디오 요소는 모양이 확인란 요소에 더 가깝지만 라디오 요소에는 사각형 대신 원이 있습니다.
NS 태그는 기본적으로 사용자가 단일 값을 선택할 수 있는 드롭다운 상자를 생성합니다.
태그 및 라디오 요소 사용 예
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
날짜 요소 사용
날짜 요소는 클릭하면 달력을 생성하는 작은 텍스트 상자를 생성합니다. 사용 데이트 양식의 입력 유형으로 사용자가 잠재적으로 잘못된 날짜를 입력하는 것을 방지하여 잠재적으로 잘못된 데이터를 수집할 수 있습니다.
날짜 요소 사용 예
이메일 및 비밀번호 요소 사용
개발자가 이메일 또는 비밀번호 값을 유형 속성에 할당하는 경우 태그를 사용하면 각각 동일한 텍스트 상자를 생성합니다. 그러나 이러한 상자를 사용하기 시작하면 차이점이 분명해집니다.
이메일 요소는 텍스트 상자에 입력된 데이터를 모니터링하고 각 제출이 이메일 주소의 표준 요구 사항을 충족하는지 확인합니다. 이는 로컬 부분이 있고 그 뒤에 @ 기호가 있고 도메인으로 끝나는 것을 의미합니다.
이메일 요소 예제 사용
위의 예에서는 자리 표시자 , 이 속성은 텍스트 상자에 희미한 회색으로 표시되는 텍스트 값을 사용합니다. 이 텍스트는 위의 예에서 볼 수 있듯이 텍스트 상자에 배치할 데이터를 나타내는 데 사용됩니다.
password 요소는 텍스트 상자에 입력되는 문자를 별표로 바꿉니다. 따라서 다른 사람이 컴퓨터 화면을 볼 수 있는 경우 입력한 암호를 볼 수 없습니다.
비밀번호 요소 사용 예
버튼 태그 사용
폼에는 일반적으로 두 가지 유형의 버튼이 있습니다. 첫 번째는 양식에 입력된 데이터를 action 속성에 할당된 값으로 제출하는 제출 버튼입니다. < 형태> 꼬리표).
제출 버튼 예
Submit
양식에서 일반적으로 사용되는 두 번째 유형의 단추는 사용자가 새 데이터를 입력할 수 있도록 양식의 데이터를 지우는 재설정 단추입니다. NS 태그에는 유형 버튼의 기능을 나타내는 데 사용되는 속성입니다. 위의 예에서 유형 속성은 값을 할당합니다 제출하다 , 따라서 유형 가치 초기화 양식을 재설정하는 데 사용됩니다.
재설정 버튼 예
Reset
양식 만들기
HTML로 간단한 양식을 만들려면 위에서 언급한 모든 요소를 꼬리표.
양식 예제 만들기
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
위의 코드는 다음 형식을 생성합니다.
안드로이드에서 이미지를 뒤집는 방법
이제 HTML로 간단한 양식을 만들 수 있습니다
이 기사에서는 기능적인 HTML 양식을 만드는 모든 도구를 제공합니다. 양식 생성에 사용되는 다양한 HTML 태그를 식별하고 이러한 태그와 함께 사용할 수 있는 다양한 속성을 탐색합니다.
그러나 웹 사이트에서 볼 수 있는 대부분의 양식에는 하나의 추가 구성 요소가 있습니다. 양식에 생명을 불어넣고 미학적으로 더 즐겁게 만드는 데 사용되는 CSS입니다.
공유하다 공유하다 트위터 이메일 필수 CSS3 속성 치트 시트CSS3 속성 치트 시트로 필수 CSS 구문을 마스터하세요.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 웹 개발
- 코딩 튜토리얼
Kadeisha Kean은 전체 스택 소프트웨어 개발자이자 기술/기술 작가입니다. 그녀는 가장 복잡한 기술 개념 중 일부를 단순화하는 독특한 능력을 가지고 있습니다. 기술 초보자라면 누구나 쉽게 이해할 수 있는 소재를 생산합니다. 그녀는 글쓰기, 흥미로운 소프트웨어 개발 및 세계 여행(다큐멘터리를 통해)에 열정적입니다.
카데이샤 킨이 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.