HTML5의 입력 태그(유형 속성)에 대한 자세한 소개-H5 튜토리얼-php.cn

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개

零下一度

풀어 주다： 2018-05-14 16:26:12

원래의

11883명이 탐색했습니다.

새로운 유형속성소개

먼저 표를 살펴보겠습니다

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개

HTML5의 type.png

其中标有`红色5`的代表`HTML5`中推出的

로그인 후 복사

테스트 코드:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>测试type属性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

로그인 후 복사

런닝 효과

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개

새 유형 속성 입력.png

새로운 유형 속성에 대한 주의 사항

* 点击不同type的input标签会有不一样的弹出内容
* 如果发现w3cschool内容不全,建议去MDN搜索
* 并不是每一个新type属性,在PC端都有不同的显示
* color, date, number 这些效果较为明显

로그인 후 복사

호환성 문제

IE 호환성으로 인해 문제, 브라우저마다 표시 효과가 다릅니다
그러나 모바일 장치의 지원 효과는 더 좋습니다. 테스트를 위해 페이지를 휴대폰으로 보낼 수 있습니다
실제 개발에서는

입력양식검증

을 선택하시면 됩니다. 사용자로서는 불가능합니다. email地址``电话长度 등의 내용을 입력할 때 입력 오류가 발생할 수 있습니다. 사용자가 10개 이상의 양식 내용을 열심히 입력했는데 입력 오류로 인해 제출을 클릭하면 내용이 비어 있습니다

w3cSchool 검색 위치

다음과 같이 api 문서의 검색 위치를 추가

[w3cSchool_이벤트속성]w3School
[w3cSchool_input 태그]w3cSchool

이메일 태그

H5input에 있는 type의 새로운 email 속성은 형식 확인과 함께 제공됩니다

샘플 코드:

제출<a href="http://www.php.cn/code/5991.html" target="_blank" > 버튼<code>提交<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>을 클릭하면< /code>, 입력한 email 형식이 올바르지 않으면 프롬프트 메시지가 나타납니다.
email 태그는 내용이 비어 있는지 확인하지 않습니다<🎜. >

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개

이메일에는 프롬프트가 포함되어 있습니다.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

로그인 후 복사

require d 속성

자체 검증 효과가 없는 태그의 경우 속성을 수동으로 추가하여 검증을 높여야 합니다.

사용 방법:

속성만 추가하면 됩니다. 할당이 필요하지 않습니다.required

예제 코드:

아무 것도 입력하지 않고
컨트롤 제출을 클릭하면 프롬프트

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개
requiredproperty.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

로그인 후 복사

패턴 사용자 정의

검증 규칙

사용

태그는 다음 사항만 확인할 수 있습니다. 내용이 비어있으니 좀 더 정확하게 확인하고 싶다면 확인 규칙을 맞춤 설정해야 합니다.
required

사용법:

태그 추가
required
정규식 사용
검증 규칙 작성

샘플 코드:

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개
맞춤 확인.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

로그인 후 복사

自定义验证信息

系统的提示消息只能够提示格式错误,如果想要更为详细的就需要我们通过js来自定义了

使用方法:

注册事件:oninput:输入时,oninvalid验证失败
设置自定义信息dom.setCustomValidity("这里输入提示信息");

示例代码:

输入时,会弹出oninput绑定的代码

HTML5의 입력 태그(유형 속성)에 대한 자세한 소개

输入中.png

验证失败时,会弹出oninvalid绑定的代码

验证失败.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入哦");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("请不要输入火星的手机号好吗？");
    };

</script>

로그인 후 복사