HTML input #min과 #max 속성
input min과 max는 입력 필드의 최소값과 최대값을 지정한다.
최소 및 최대 특성은 숫자, 범위, 날짜, 날짜-로컬 날짜, 월, 시간 및 주 등의 입력 유형에서 작동한다.
팁: max 및 min 속성을 함께 사용하여 다양한 법적 값을 만든다.
| <!DOCTYPE html> <html> <body> <h1> input min / max 속성</h1> <p>min 및 max 속성은 입력 요소의 최소 및 최대 값을 지정합니다.</p> <form action="/action_page.php"> <label for="datemax">1980-01-01 이전의 날짜를 입력하세요:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">2000-01-01 이후의 날자를 입력하세요:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">수(1~5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #multiple 속성
input multiple 속성은 사용자가 입력 필드에 둘 이상의 값을 입력할 수 있도록 지정한다.
multiple 속성은 전자 메일 및 파일 입력 유형과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1>input multiple 속성</h1> <p>다중 속성은 사용자가 입력 필드에 둘 이상의 값을 입력할 수 있도록 지정합니다.</p> <form action="/action_page.php"> <label for="files">파일을 선택하세요:</label> <input type="file" id="files" name="files" multiple><br><br> <input type="submit" value="Submit"> </form> <p>여러 파일을 선택하려면 CTRL 또는 SHIFT 키를 누른 상태에서 선택합니다.</p> </body> </html> |
HTML input #pattern 속성
input pattern 속성은 양식을 제출할 때 입력 필드의 값을 확인할 정규식을 지정한다.
pattern 속성은 텍스트, 날짜, 검색, URL, 전화, 전자 메일 및 암호 등의 입력 유형과 함께 작동한다.
팁: 글로벌 제목 속성을 사용하여 사용자에게 도움이 되는 패턴을 설명한다.
| <!DOCTYPE html> <html> <body> <h1>input pattern 속성</h1> <p>pattern 속성은 입력 요소의 값을 검사할 정규식을 지정합니다.</p> <form action="/action_page.php"> <label for="country_code">국가 코드:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br> <input type="submit" value="Submit"> </form> <p><strong>참고: </strong> Safari 10 이전 버전에서는 입력 태그의 패턴 속성이 지원되지 않습니다.</p> </body> </html> |
HTML input #placeholder 속성
input placeholder 속성은 입력 필드의 예상 값(샘플 값 또는 예상 형식에 대한 간단한 설명)을 설명하는 짧은 힌트를 지정한다.
사용자가 값을 입력하기 전에 입력 필드에 짧은 힌트가 표시된다.
placeholder 속성은 텍스트, 검색, URL, 전화, 전자 메일 및 암호와 같은 입력 유형에서 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input placeholder 속성</h1> <p>placeholder 속성은 입력 필드의 예상 값을 설명하는 짧은 힌트를 지정합니다.</p> <form action="/action_page.php"> <label for="phone">전화번호를 입력하세요:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #required 속성
input required 속성은 양식을 제출하기 전에 입력 필드를 입력해야 함을 지정한다.
required 속성은 텍스트, 검색, URL, 텔, 전자 메일, 암호, 날짜 선택기, 번호, 확인란, 라디오 및 파일 등의 입력 유형과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input required 속성</h1> <p>required 속성은 양식을 제출하기 전에 입력 필드를 입력해야 함을 지정합니다.</p> <form action="/action_page.php"> <label for="username">사용자이름:</label> <input type="text" id="username" name="username" required> <input type="submit" value="Submit"> </form> <p><strong>참고: </strong> Safari 이전 버전 10.1에서는 입력 태그의 필수 속성이 지원되지 않습니다.</p> </body> </html> |
지금까지 HTML input 유형에 다양한 속성에 대해서 살펴보았다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML input form* 속성 (0) | 2023.06.15 |
|---|---|
| HTML input 속성-3 (0) | 2023.06.14 |
| HTML input 속성-1 (0) | 2023.06.12 |
| HTML input 유형-4 (0) | 2023.06.11 |
| HTML input 유형-3 (0) | 2023.06.10 |
댓글