HTML에서는 HTML 형식의 중요한 요소입니다. 입력 요소의 'type' 속성은 정보 필드를 정의하는 다양한 유형이 될 수 있습니다. 예를 들어 텍스트 상자를 제공합니다.
다음은 HTML의 모든 유형의 요소 목록입니다.
| 유형=' ' | 설명 |
|---|---|
| 텍스트 | 한 줄 텍스트 입력 필드를 정의합니다. |
| 비밀번호 | 한 줄 비밀번호 입력 필드를 정의합니다. |
| 제출하다 | 양식을 서버에 제출하기 위한 제출 버튼을 정의합니다. |
| 초기화 | 양식의 모든 값을 재설정하는 재설정 버튼을 정의합니다. |
| 라디오 | 하나의 옵션을 선택할 수 있는 라디오 버튼을 정의합니다. |
| 체크박스 | 여러 옵션 양식을 선택할 수 있는 확인란을 정의합니다. |
| 단추 | 이벤트에 대한 작업을 수행하도록 프로그래밍할 수 있는 간단한 푸시 버튼을 정의합니다. |
| 파일 | 장치 저장소에서 파일을 선택하도록 정의합니다. |
| 영상 | 그래픽 제출 버튼을 정의합니다. |
HTML5에는 요소에 새로운 유형이 추가되었습니다. 다음은 HTML5의 요소 유형 목록입니다.
| 유형=' ' | 설명 |
|---|---|
| 색상 | 특정 색상으로 입력 필드를 정의합니다. |
| 날짜 | 날짜 선택을 위한 입력 필드를 정의합니다. |
| 날짜 시간-현지 | 시간대 없이 날짜를 입력하기 위한 입력 필드를 정의합니다. |
| 이메일 | 이메일 주소를 입력하기 위한 입력 필드를 정의합니다. |
| 월 | 시간대 없이 월과 연도로 컨트롤을 정의합니다. |
| 숫자 | 숫자를 입력하기 위한 입력 필드를 정의합니다. |
| URL | URL을 입력하기 위한 필드를 정의합니다. |
| 주 | 시간대 없이 주-연도로 날짜를 입력하는 필드를 정의합니다. |
| 찾다 | 검색 문자열을 입력하기 위한 단일 행 텍스트 필드를 정의합니다. |
| 전화 | 전화번호를 입력하기 위한 입력 필드를 정의합니다. |
다음은 예제와 함께 요소 유형에 대한 설명입니다.
1. :
'텍스트' 유형의 요소는 한 줄 입력 텍스트 필드를 정의하는 데 사용됩니다.
예:
Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p>지금 테스트해보세요
산출:
입력 '텍스트' 유형:
그만큼 '텍스트' field는 한 줄 입력 텍스트 필드를 정의합니다.
이름을 입력하세요성을 입력하세요
메모: 기본 최대 문자 길이는 20입니다.
2. :
'password' 유형의 요소를 사용하면 사용자가 웹페이지에 비밀번호를 안전하게 입력할 수 있습니다. 비밀번호 항목에 입력된 내용은 '*' 또는 '.'으로 변환되어 다른 사용자가 읽을 수 없습니다.
예:
Enter User name <br> <br> Enter Password <br> <br> <br>지금 테스트해보세요
산출:
'비밀번호' 유형을 입력하세요.
그만큼 '비밀번호' 필드는 비밀번호를 안전하게 입력하기 위해 한 줄 입력 비밀번호 필드를 정의합니다.
C 프로그램 문자열 배열사용자 이름을 입력하세요
암호를 입력
삼. :
'제출' 유형의 요소는 '클릭' 이벤트가 발생할 때 서버에 양식을 제출하기 위한 제출 버튼을 정의합니다.
예:
Enter User name <br> <br> Enter Password <br> <br> <br>지금 테스트해보세요
산출:
'제출' 유형 입력:
사용자 이름을 입력하세요암호를 입력
제출 버튼을 클릭하면 양식이 서버에 제출되고 페이지가 다음으로 리디렉션됩니다. 행동 value.'action' 속성에 대해서는 이후 장에서 배울 것입니다.
4. :
'reset' 유형도 버튼으로 정의되지만 사용자가 클릭 이벤트를 수행하면 기본적으로 입력된 모든 값이 재설정됩니다.
예:
User id: Password: <br> <br>지금 테스트해보세요
산출:
'재설정' 유형 입력:
사용자 ID: 비밀번호:사용자 ID와 비밀번호의 입력 값을 변경한 후 재설정을 클릭하면 입력 필드가 기본값으로 재설정됩니다.
5. :
'radio' 유형은 관련 옵션 세트 중에서 옵션을 선택할 수 있는 라디오 버튼을 정의합니다. 한 번에 하나의 라디오 버튼 옵션만 선택할 수 있습니다.
아미샤 파텔
예:
마음에 드는 색상을 선택해주세요.
빨간색파란색
녹색
분홍색
지금 테스트해보세요
산출:
'라디오' 유형 입력
마음에 드는 색상을 선택해주세요.
빨간색파란색
녹색
분홍색
6. :
'체크박스' 유형은 주어진 옵션에서 선택 항목을 선택하기 위해 선택하거나 선택 취소할 수 있는 정사각형 상자로 표시됩니다.
참고: '라디오' 버튼은 체크박스와 유사하지만 두 유형 사이에는 중요한 차이점이 있습니다. 라디오 버튼을 사용하면 사용자가 한 번에 하나의 옵션만 선택할 수 있는 반면, 체크박스를 사용하면 한 번에 0개에서 여러 개의 옵션을 선택할 수 있습니다. .
예:
Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br>지금 테스트해보세요
산출:
자바에서 열린 파일
'체크박스' 유형을 입력하세요.
등록 양식
당신의 이름을 입력:좋아하는 스포츠를 선택해 주세요.
크리켓테니스
축구
야구
배드민턴
7. :
'버튼' 유형은 클릭 이벤트와 같은 모든 이벤트에서 기능을 제어하도록 프로그래밍할 수 있는 간단한 푸시 버튼을 정의합니다.
참고: 주로 JavaScript로 작동합니다.
예:
지금 테스트해보세요
산출:
'버튼' 유형을 입력합니다.
결과를 보려면 버튼을 클릭하세요.
참고: 위의 예에서는 JS 튜토리얼에서 배우게 될 JS의 '경고'를 사용했습니다. 팝업창을 표시하는데 사용됩니다.
8. :
'file' 유형의 요소는 사용자 장치 저장소에서 하나 이상의 파일을 선택하는 데 사용됩니다. 파일을 선택하고 제출한 후 JS 코드 및 파일 API를 사용하여 이 파일을 서버에 업로드할 수 있습니다.
예:
Select file to upload:지금 테스트해보세요
산출:
'파일' 형식을 입력하세요.
지정하지 않을 때까지 모든 유형의 파일을 선택할 수 있습니다! 선택한 파일이 '파일 선택' 옵션 옆에 나타납니다.
업로드할 파일 선택:9. :
'image' 유형은 이미지 형식의 제출 버튼을 나타내는 데 사용됩니다.
예:
<h2>Input 'image' type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br>
HTML5에 새로 추가된 유형 요소
1. :
'color' 유형은 색상을 포함하는 입력 필드를 정의하는 데 사용됩니다. 이를 통해 사용자는 브라우저의 시각적 색상 인터페이스를 통해 색상을 지정할 수 있습니다.
참고: 'color' 유형은 16진수 형식의 색상 값만 지원하며 기본값은 #000000(검은색)입니다.
예:
Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick지금 테스트해보세요
산출:
'색상' 유형 입력:
좋아하는 색상을 선택하세요:업클릭
아래 클릭
메모: 'color' 유형의 기본값은 #000000(검은색)입니다. 16진수 형식의 색상 값만 지원합니다.
2. :
'날짜' 유형의 요소는 사용자가 지정된 형식으로 날짜를 입력할 수 있는 입력 필드를 생성합니다. 사용자는 텍스트 필드나 날짜 선택기 인터페이스를 통해 날짜를 입력할 수 있습니다.
예:
Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br>지금 테스트해보세요
산출:
'날짜' 유형을 입력하세요.
시작 및 종료 날짜 선택:시작일:
종료일:
삼. :
'datetime-local' 유형의 요소는 사용자가 시간대 정보 없이 시간 및 분 단위로 현지 시간뿐만 아니라 날짜를 선택할 수 있는 입력 필드를 생성합니다.
img CSS 정렬
예:
Select the meeting schedule: <br> <br> Select date & time: <br> <br>지금 테스트해보세요
산출:
'datetime-local' 유형을 입력하세요.
회의 일정을 선택하세요:날짜 및 시간 선택:
4. :
'email' 유형은 사용자가 패턴 검증을 통해 이메일 주소를 입력할 수 있는 입력 필드를 생성합니다. 여러 속성을 사용하면 사용자가 두 개 이상의 이메일 주소를 입력할 수 있습니다.
예:
<b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b>지금 테스트해보세요
산출:
'이메일' 유형을 입력하세요.
당신의 이메일 주소를 입력 해주세요메모: 사용자는 다음과 같이 쉼표나 공백으로 구분하여 여러 이메일 주소를 입력할 수도 있습니다.
여러 이메일 주소를 입력하세요.5. :
'month' 유형은 'MM, YYYY' 형식으로 월과 연도를 쉽게 입력할 수 있는 입력 필드를 생성합니다. 여기서 MM은 월 값을 정의하고 YYYY는 연도 값을 정의합니다. 새로운
예:
Enter your Birth Month-year:지금 테스트해보세요
산출:
'월' 유형 입력:
출생 월-연도를 입력하세요:6. :
요소 유형 번호는 사용자가 숫자 값을 입력할 수 있는 입력 필드를 생성합니다. min 및 max 속성을 사용하여 최소값 및 최대값 입력을 제한할 수도 있습니다.
예:
Enter your age:지금 테스트해보세요
산출:
'숫자' 유형 입력
나이를 입력하세요:메모: 50~80 범위의 숫자를 입력할 수 있습니다. 범위 이외의 숫자를 입력하면 오류가 표시됩니다.
자바의 인스턴스
7. :
'url' 유형의 요소는 사용자가 URL을 입력할 수 있는 입력 필드를 생성합니다.
예:
Enter your website URL: <br>지금 테스트해보세요
산출:
'url' 유형을 입력하세요.
웹사이트 URL을 입력하세요:8. :
week 유형은 사용자가 시간대 없이 드롭다운 달력에서 주와 연도를 선택할 수 있는 입력 필드를 생성합니다.
예:
<b>Select your best week of year:</b> <br> <br>지금 테스트해보세요
산출:
'주' 유형을 입력하세요.
일년 중 가장 좋은 주를 선택하세요:9. :
'검색' 유형은 사용자가 검색 문자열을 입력할 수 있는 입력 필드를 생성합니다. 이는 텍스트 입력 유형과 기능적으로 대칭이지만 스타일이 다를 수 있습니다.
예:
Search here:지금 테스트해보세요
산출:
'검색' 유형을 입력하세요.
여기에서 검색하세요:10. :
?tel? 유형의 요소 전화번호를 입력하기 위한 입력 필드를 생성합니다. 전화번호 패턴은 전 세계적으로 다를 수 있으므로 'tel' 유형에는 이메일과 같은 기본 유효성 검사가 없습니다.
예:
<b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br>지금 테스트해보세요
산출:
'전화' 유형을 입력하세요.
전화번호를 입력하세요(xxx-xxx-xxxx 형식):메모: 여기서는 사용자가 주어진 형식으로 숫자를 입력할 수 있도록 허용하고 입력 필드에 숫자를 입력해야 하는 '패턴'과 '필수'라는 두 가지 속성을 사용하고 있습니다.