HTML5のinputタグ（type属性）について詳しく紹介します。
新しいタイプ属性はじめに
まずテーブルを見てみましょう
其中标有`红色5`的代表`HTML5`中推出的
-
テストコード:
ランニングエフェクト
新しいタイプ属性の入力.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属性
示例代码:
当我们点击
提交<a href="//m.sbmmt.com/code/5991.html" target="_blank">按钮</a>时,如果输入的email格式不正确,会弹出提示信息email标签并不会验证内容是否为空，这个需要注意
email自带提示.png
* 点击不同type的input标签会有不一样的弹出内容 * 如果发现w3cschool内容不全,建议去MDN搜索 * 并不是每一个新type属性,在PC端都有不同的显示 * color, date, number 这些效果较为明显
required属性
对于没有自带验证效果的标签,就需要手动添加属性增加验证了
使用方法:
只需要添加
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/>
<input type="submit">
</form>
</body>
</html>pattern 自定义验证规则
使用
required标签只能够验证内容是否为空,如果想要验证的更为准确就需要自定义验证规则了
使用方法:
プロパティ]w3School[w3cSchool_inputタグ]w3cSchool
- メールタグ
H5</code ><code>email の input の新しい type 属性には形式検証が付属しています
サンプルコード:
送信<a href="//m.sbmmt.com/code/5991.html" target="_blank">ボタン🎜をクリックしたとき、入力された 電子メールの形式 が正しくない場合、プロンプト メッセージがポップアップ表示されます🎜🎜🎜🎜email タグは、コンテンツが空であるかどうかを確認しません。注意してください。これ🎜🎜🎜🎜🎜
🎜🎜🎜メールにはヒントが付いています。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 属性🎜🎜🎜独自の検証効果があるため、検証を増やすには属性を手動で追加する必要があります🎜🎜🎜🎜🎜使用法:🎜🎜🎜🎜🎜🎜 required 属性を追加するだけで、割り当ては必要ありません🎜🎜🎜 🎜🎜🎜サンプルコード:🎜🎜🎜🎜🎜🎜When< a href="//m.sbmmt.com/js/js-jspopular-guide-widget.html" target="_blank">Control🎜When内容を入力せずに送信をクリックすると、プロンプトが表示されます🎜🎜🎜🎜 🎜🎜🎜🎜必須属性.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</code >タグはコンテンツが空かどうかのみを検証します。より正確に検証したい場合は、検証ルールをカスタマイズする必要があります🎜</blockquote>🎜🎜🎜🎜。使用法: 🎜🎜🎜🎜🎜🎜必要な場合はカスタム検証ルールを追加します <code>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绑定的代码
输入中.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 完整版手册
以上がHTML5のinputタグ（type属性）について詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
シンプルなHTML5 Webページを作成する方法
Aug 12, 2025 am 11:51 AM
シンプルなHTML5 Webページを作成するには、最初に宣言ドキュメントタイプを使用してから、キャラクターのエンコード、ビューポート、タイトルを設定する基本構造を構築する必要があります。 .htmlファイルとして保存し、サーバーサポートなしで表示するためにブラウザで直接開きます。これは、完全かつ効果的なHTML5ページの基礎です。
HTML5のDraggable属性は何ですか
Aug 12, 2025 am 09:50 AM
thedraggableattribute inhtml5は、 "true"、 "fals"、oranemptystring（sameas "true"）を使用して、hallanelementcanbedraggedを使用しています
HTML5でカスタムチェックボックスを作成する方法
Aug 16, 2025 am 07:05 AM
カスタムチェックボックスを作成するには、最初にラベル付きのHTML構造を使用して、アクセシビリティを確保する必要があります。 2。CSSを介してデフォルトのチェックボックスを非表示にしますが、その機能を保持します。 3.擬似要素と擬似クラスを使用して、カスタムチェックマーク要素に選択された状態を描画します。 4.ホバー、フォーカス、選択スタイルを追加して、インタラクティブなフィードバックを強化します。 5.キーボードナビゲーションとスクリーンリーダーをサポートするためにネイティブの入力を存在させ、最終的に美しくアクセスしやすいカスタムチェックボックスを実現します。
HTML5でオートフォーカス属性をどのように使用しますか？
Aug 14, 2025 pm 06:47 PM
theautofocusattributealoutoMatically focusesapageLoads.2.itisAbooleAnattribute、sonovalueisneedededededededededetag.3.onlyonelementperementperpageshoulduseittoavoiduluidunpredicablebehavior.4.
HTML5のナビゲーションリンクにNAVタグを使用する方法
Aug 15, 2025 am 05:55 AM
ThetaginHTML5isusedtodefineasectionofmajornavigationlinks,providingsemanticstructureandimprovingaccessibilityandSEO;itshouldwrapprimarynavigationelementslikemenusortablesofcontents,noteverylinkonapage,andcanbeenhancedwithARIAlabelssuchasaria-label=&q
HTML5の定義リストは何ですか？
Aug 20, 2025 pm 02:01 PM
adefinitionlistinhtml5iscreatedusingtheelementtogroupterms（）を使用して、itheirdefinitions（）を使用して、maultipleteReadedefinitionormtohavemultipledefinitionsを許可します
HTML5ページで非クリティカルなCSSを延期する方法は？
Aug 12, 2025 am 12:15 AM
ページの読み込みパフォーマンスを効果的に改善するには、最初に重要なCSSをインラインにし、非批判的なCSSを非同期にロードする必要があります。 1.ツールを使用するか、重要なCSSを手動で識別し、インライン化します。 2。rel = "Preload"を使用して、onload、JavaScriptの動的荷重、またはRequestIdLecallbackを非同期に組み合わせます。 3.メディア属性を使用して、印刷やトピックなどの条件付きスタイルの読み込みを遅らせます。 4.リクエストを減らすために、非クリティカルなCSSをマージおよび圧縮します。 Media = "Print"手法を使用して、JavaScriptのない非同期負荷を実現することで、最初の画面のレンダリング速度を大幅に最適化できます。
