HTML5のinputタグ（type属性）について詳しく紹介します。-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5のinputタグ（type属性）について詳しく紹介します。

零下一度

May 14, 2018 pm 04:26 PM

新しいタイプ属性はじめに

まずテーブルを見てみましょう

HTML5のinputタグ（type属性）について詳しく紹介します。

type.png (HTML5)

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

テストコード:

りー

ランニングエフェクト

HTML5のinputタグ（type属性）について詳しく紹介します。

新しいタイプ属性の入力.png

新しいタイプ属性に関する注意点

  <!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>

互換性の問題

つまり、互換性の問題、表示効果ブラウザによって異なります
が、モバイルデバイスでのサポート効果はより優れており、テストのためにページを携帯電話に送信できます
実際の開発では、ニーズに応じて選択できます

入力

フォーム検証

たとえば、メールアドレス、電話の長さなどを入力するときに、ユーザーが入力エラーを引き起こす可能性があることを想像してください。ユーザーがフォームの内容を 10 件以上入力するのに苦労しました。送信をクリックするときに入力エラーが発生したため、内容がクリアされました

email地址``电话长度等等都有可能出现输入错误,试想一下,当用户辛辛苦苦的输入了10多个表单内容,点击提交由于输入错误,内容被清空了

w3cSchool 查阅位置

下面把api文档的查阅位置添加如下

[w3cSchool_事件属性]w3School
[w3cSchool_input标签]w3cSchool

email标签

在H5中的input的新type属性email自带格式验证

示例代码:

当我们点击提交<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>时,如果输入的email格式不正确,会弹出提示信息
email标签并不会验证内容是否为空，这个需要注意

HTML5のinputタグ（type属性）について詳しく紹介します。

email自带提示.png

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

required属性

对于没有自带验证效果的标签,就需要手动添加属性增加验证了

使用方法:

只需要添加required属性即可,不需要赋值

示例代码:

当控件没有输入任何内容直接点击提交时,会弹出提示

HTML5のinputタグ（type属性）について詳しく紹介します。

required属性.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>

pattern 自定义验证规则

使用required标签只能够验证内容是否为空,如果想要验证的更为准确就需要自定义验证规则了

使用方法:

在需要添加自定义验证规则的元素中添加requiredw3cSchool 場所を確認してください
以下は api
ドキュメントの参照場所を以下のように追加します

イベント

[w3cSchool_inputタグ]w3cSchool

メールタグ

H5

email

input

type

HTML5のinputタグ（type属性）について詳しく紹介します。
サンプルコード:

🎜 🎜🎜送信<a href="http://www.php.cn/code/5991.html" target="_blank">ボタン🎜</a>をクリックしたとき、入力された 電子メールの形式 が正しくない場合、プロンプトメッセージがポップアップ表示されます🎜🎜🎜🎜email タグは、コンテンツが空であるかどうかを確認しません。注意してください。これ🎜🎜🎜🎜🎜 HTML5のinputタグ（type属性）について詳しく紹介します。

🎜🎜🎜メールにはヒントが付いています。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>

🎜require🎜d 属性🎜🎜🎜独自の検証効果があるため、検証を増やすには属性を手動で追加する必要があります🎜 blockquote>🎜🎜🎜🎜使用法:🎜🎜🎜🎜🎜🎜 required 属性を追加するだけで、割り当ては必要ありません🎜🎜🎜 🎜🎜🎜サンプルコード:🎜🎜🎜🎜🎜🎜WhenControl🎜When内容を入力せずに送信をクリックすると、プロンプトが表示されます🎜🎜🎜🎜 🎜 HTML5のinputタグ（type属性）について詳しく紹介します。

🎜🎜🎜必須属性.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>

🎜パターンカスタム検証ルール🎜🎜🎜🎜use requiredタグはコンテンツが空かどうかのみを検証します。より正確に検証したい場合は、検証ルールをカスタマイズする必要があります🎜🎜🎜🎜🎜。使用法: 🎜🎜🎜🎜🎜🎜必要な場合はカスタム検証ルールを追加します required タグを要素に追加します🎜🎜🎜🎜🎜正規表現🎜を使用して検証ルールを記述します🎜🎜🎜🎜🎜🎜サンプルコード:🎜🎜🎜🎜🎜🎜入力した内容が検証条件と一致しない場合、対応するプロンプトがポップアップ表示されます🎜🎜🎜🎜🎜🎜🎜🎜🎜カスタム検証.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のinputタグ（type属性）について詳しく紹介します。

输入中.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>

总结

优点:

html5自带的验证使用便捷

不需要额外的js 框架

缺点:

兼容性问题
如果想要兼容所有浏览器,建议使用js验证框架

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上がHTML5のinputタグ（type属性）について詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。