HTML input #step 속성
input step 속성은 입력 필드의 법적 번호 간격을 지정한다.
예: 단계="3"인 경우 법적 번호는 -3, 0, 3, 6 등일 수 있다.
팁: 이 특성은 max 및 min 특성과 함께 사용하여 다양한 법적 값을 만들 수 있다.
input step 속성은 숫자, 범위, 날짜, 날짜-로컬, 월, 시간 및 주 등의 입력 유형과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input step 속성</h1> <p>step 속성은 입력 요소에 대한 법적 번호 간격을 지정합니다.</p> <form action="/action_page.php"> <label for="points">포인트:</label> <input type="number" id="points" name="points" step="3"> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #autofocus 속성
input autofocus 속성은 페이지가 로드될 때 입력 필드가 자동으로 포커스를 갖도록 지정한다.
| <!DOCTYPE html> <html> <body> <h1> input autofocus 속성</h1> <p>autofocus 속성은 페이지가 로드될 때 입력 필드가 자동으로 포커스를 갖도록 지정합니다.</p> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML input #height, #width 속성
input height, width 속성은 <입력 유형="이미지"> 요소의 높이 및 너비를 지정한다.
| <!DOCTYPE html> <html> <body> <h1> input height and width 속성</h1> <p>height 및 width 속성은 input type="image" 요소의 높이 및 너비를 지정합니다.</p> <form action="/action_page.php"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">성:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> <p><b>참고: </b> 입력 유형="image"는 영상 버튼을 활성화한 클릭의 X 및 Y 좌표를 전송합니다.</p> </body> </html> |
HTML input #list 속성
input list 속성은 <input> 요소에 대해 미리 정의된 옵션을 포함하는 <datalist> 요소를 참조합니다.
| <!DOCTYPE html> <html> <body> <h1> input list 속성</h1> <p>목록 특성은 입력 요소에 대해 미리 정의된 옵션이 포함된 데이터 목록 요소를 참조합니다.</p> <form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Submit"> </form> <p><b>참고: </b> 데이터 목록 태그는 Safari 12.0(또는 이전 버전)에서 지원되지 않습니다.</p> </body> </html> |
HTML input #autocomplete 속성
input autocomplete 특성은 양식 또는 입력 필드에 자동 완성 기능을 설정할지 여부를 지정한다.
자동 완성을 사용하면 브라우저에서 값을 예측할 수 있다. 사용자가 필드를 입력하기 시작하면 브라우저는 이전에 입력한 값을 기준으로 필드를 채우는 선택사항을 표시해야 한다.
autocomplte 속성은 <form> 및 다음과 같은 <input> type(text, search, url, 텔, email, password, datepickers, range및 color)과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> autocomplete 속성</h1> <p>autocomplete 속성은 입력 필드의 자동 완성 사용 여부를 지정합니다.</p> <p>양식을 작성하고 제출한 다음 페이지를 다시 로드하여 자동 완성이 어떻게 작동하는지 확인합니다.</p> <p>양식의 경우 자동 완성이 "켜짐"이지만 전자 메일 필드의 경우 "꺼짐"입니다!</p> <form action="/action_page.php" autocomplete="on"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">성:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">이메일:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
지금까지 HTML input 요소에 속성들을 살펴보았습니다.
간단한 것 같지만, 꼭 실습을 하고 꼭 손수 코딩을 하며 손에 익히고 머리에 익히기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 캔버스 그래픽스(Canvas Graphics) (0) | 2023.06.16 |
|---|---|
| HTML input form* 속성 (0) | 2023.06.15 |
| HTML input 속성-2 (0) | 2023.06.13 |
| HTML input 속성-1 (0) | 2023.06.12 |
| HTML input 유형-4 (0) | 2023.06.11 |
댓글