HTML 디자인 양식

<시간/>

사이트 방문자로부터 일부 데이터를 수집하려면 HTML 양식이 필요합니다. 예를 들어, 사용자 등록 중에 이름, 이메일 주소, 신용 카드 등과 같은 정보를 수집하려고 합니다.

양식은 사이트 방문자로부터 입력을 받아 CGI, ASP 스크립트 또는 PHP 스크립트 등과 같은 백엔드 애플리케이션에 게시합니다. 백엔드 애플리케이션은 내부에 정의된 비즈니스 로직을 기반으로 전달된 데이터에 대해 필요한 처리를 수행합니다. 신청서.

태그는 HTML에서 폼을 생성하는 데 사용되며 입력, 텍스트 영역 등과 같은 다양한 폼 요소가 포함되어 있습니다 -

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

양식을 만들려면 텍스트, 비밀번호, 생년월일 필드, 전화, 이메일, 버튼 등과 같은 필드를 추가해야 합니다. 이 모든 것을 요소 −

로 추가할 수 있습니다.

Sr.No	유형 및 설명
1	텍스트 명목상 줄 바꿈이 없는 자유 형식 텍스트 필드입니다.
2	비밀번호 명목상 줄 바꿈이 없는 민감한 정보를 위한 자유 형식 텍스트 필드입니다.
3	확인란 미리 정의된 목록에서 0개 이상의 값 집합입니다.
4	라디오 열거된 값입니다.
5	제출 자유 형식의 버튼은 양식 제출을 시작합니다.
6	파일 MIME 유형 및 선택적으로 파일 이름이 있는 임의 파일.
7	이미지 특정 이미지의 크기에 상대적인 좌표로, 선택한 마지막 값이어야 하고 양식 제출을 시작해야 한다는 추가 의미가 있습니다.
8	숨김 일반적으로 사용자에게 표시되지 않는 임의의 문자열입니다.
9	선택 라디오 유형과 매우 유사한 열거 값입니다.
10	텍스트 영역 명목상 줄 바꿈 제한이 없는 자유 형식 텍스트 필드..
11	버튼 버튼과 관련된 모든 이벤트를 시작할 수 있는 자유 형식의 버튼입니다.

그러나 HTML5는 요소 −

에 대해 더 많은 옵션을 도입했습니다.

Sr.No	유형 및 설명
1	날짜/시간 표준 시간대가 UTC로 설정된 ISO 8601에 따라 인코딩된 날짜 및 시간(년, 월, 일, 시, 분, 초, 초 단위)입니다.
2	날짜/시간-현지 표준 시간대 정보 없이 ISO 8601에 따라 인코딩된 날짜 및 시간(년, 월, 일, 시, 분, 초, 초 단위)입니다.
3	날짜 ISO 8601에 따라 인코딩된 날짜(년, 월, 일)입니다.
4	월 ISO 8601에 따라 인코딩된 연도와 월로 구성된 날짜입니다.
5	주 ISO 8601에 따라 인코딩된 연도와 주 숫자로 구성된 날짜입니다.
6	시간 ISO 8601에 따라 인코딩된 시간(시, 분, 초, 소수 초)입니다.
7	숫자 숫자 값만 허용합니다. 단계 속성은 정밀도를 지정하며 기본값은 1입니다.
8	범위 범위 유형은 숫자 범위의 값을 포함해야 하는 입력 필드에 사용됩니다.
9	이메일 이메일 값만 허용합니다. 이 유형은 전자 메일 주소를 포함해야 하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고 하면 [email protected] 형식의 이메일 주소만 입력하게 됩니다.
10	URL URL 값만 허용합니다. 이 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고 하면 https://www.example.com 형식 또는 https://example.com 형식의 URL 주소만 입력해야 합니다.

예시

이제 양식을 만드는 예를 살펴보겠습니다. −

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML 디자인 양식

예시

이제 필드 중 하나를 확인란으로 사용하여 양식을 만드는 또 다른 예를 볼 수 있습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

이것은 다음과 같은 출력을 생성합니다 -

HTML 디자인 양식