[attribute] HTML - max 속성 - (숫자|날짜)의 최대값 지정 (= max속성 = 맥스속성) ※ 최댓값

1. max 예제 - <input> 경우
2. max 정의
3. max 구문
4. max 예제 - <meter> 경우
5. max 예제 - <progress> 경우

max 예제 - <input> 경우

<form action="/action_page.php">

  <label for="datemax">2023-01-31 이하 선택:</label>

  <input type="date" id="datemax" name="datemax" max="2012-01-31"><br>

  <label for="datemin">2023-02-01 이상 선택</label>

  <input type="date" id="datemin" name="datemin" min="2023-02-01"><br>

  <label for="quantity">1~5 중 선택</label>

  <input type="number" id="num" name="num" min="1" max="5"><br>

  <input type="submit" value="확인">

</form>

 

결과보기

max 정의

 

(숫자/날짜)의 최대값 지정.

※ <progress> 태그에 사용 시, 필요한 전체 작업의 총량 의미.

 

---

 

1. max 속성 지원 태그 종류

<input> type 중 숫자/날짜 관련된 것들, <meter>, <progress>

 

2. cf.

min 속성 - (숫자/날짜)의 최소값 지정.

 

3.

주요 최신 브라우저 모두 지원.

 

max 구문

 

• <input max="number|date">
• <meter max="number">
• <progress max="number">

 

---

[속성값]

 

number

숫자 초대값 지정.

• <input> 경우, 허용된 최대값 지정.
• <meter>, <progress> 경우, 부동소수로 최대값 지정. (기본값: 1)

 

date

날짜 최대값 지정. (※  YYYY-MM-DD 형식)

 

max 예제 - <meter> 경우

 

<p><label for="html">html 점수:</label>

<meter id="html" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="css">css 점수:</label>

<meter id="css" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="js">js 점수:</label>

<meter id="js" min="0" low="40" high="90" max="100" value="35"></meter></p>

 

결과보기

max 예제 - <progress> 경우

 

<label for="file">다운로드 진행률:</label>
<progress id="file" value="30" max="100"> 30% </progress>

 

결과보기