HTML 11 HTML5

<h1>HTML5</h1>
     
     <form method="post" action="ex20.jsp">
        
        <input type="submit" value="보내기">

        <hr>

        <label for = "txt1">이름</label><input type="text" id="txt1">

        <hr>

        <input type="text" value="이름을 입력하세요." onclick= "this.value=""">
        <input type="text" value="암호를 입력하세요." onclick= "this.value=""">

        <hr>

        <input type="text" placeholder="이름을 입력하세요.">
        <input type="password" placeholder="암호를 입력하세요.">

        <hr>

        <input type="text" placeholder="아이디를 입력하세요" required>**필수입력

입력. 필수 > 빈칸으로 제출하면 경고 메시지가 나타납니다.

이메일, URL

이메일 : <input type="email">

<hr>

URL : <input type="url">

– 유형 = “이메일”

– 유형 = “URL”

전화 : <input type = "tel">
        
<hr>

숫자 : <input type="number" min="0" max="100" step="10">

<hr>

범위(숫자입력) : <input type="range" onchange="document,getElementById('txt2').value = this.value;">
              <input type="text" id="txt2" size="10">

<hr>

색상 : <input type = "color" onchange="document.getElementById('txt3').value = this.value; document.body.bgColor = this.value;">
      <input type="text" id="txt3" size="10">

– 유형 = “전화”

– 유형 = “숫자” 최소, 최대, 단계

– 유형 = “범위”

– 유형 = “색상”

– getElementById(“아이디”)

날짜, 데이터 목록

날짜시간:
<input type="date">
<hr>
<input type="month">
<hr>
<input type="week">
<hr>
<input type="time">
<hr>
<input type="datetime">
<hr>
<input type="datetime-local">

<hr>

데이터 리스트:
<input type="text" list="list1">

<datalist id="list1">
      <option value="홍길동"></option>
      <option value="홍순신"></option>
      <option value="아무개"></option>
</datalist>

진행률, 미터

<progress></progress>
        <br>
        <progress value="0"></progress>
        <br>
        <progress value="0.2"></progress>
        <br>
        <progress value="0.4"></progress>
        <br>
        <progress value="0.6"></progress>
        <br>
        <progress value="0.8"></progress>
        <br>
        <progress value="1"></progress>
        <br>
        <progress max="100" value="65"></progress>

        <hr>

        수치:
        <br>
        <meter></meter>
        <br>
        <meter value="0"></meter>
        <br>
        <meter value="0.5"></meter>
        <br>
        <meter value="1"></meter>
        <br>
        <meter min = "0" max = "100" value="20" low="30" high="80"></meter>
        <br>
        <meter min = "0" max = "100" value="70" low="30" high="80"></meter>
        <br>
        <meter min = "0" max = "100" value="90" low="30" high="80"></meter>

        <hr>
        
        <details>
            <summary>자바?</summary>
            <p>자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</p>
        </details>