HTML5 の新しい入力タイプ

HTML フォームは常に Web の中核テクノロジーの 1 つであり、これを使用して Web 上でさまざまなアプリケーションを?qū)g行できます。 HTML5 の入力には、フォームの検証を容易にするために多くの新しいコントロールタイプが追加されました。

opera は新しい屬性を最もよくサポートしています。ie10 以下ではサポートされていませんが、他の主流ブラウザーでは部分的にサポートされています。

新しい入力タイプ

color

// Google Open がサポート
// 選択用の表示色、送信された値は 8 進(jìn)數(shù)です
<input type="color" name= "favcolor" />

注: 黒いボックスをクリックすると、色選択ボックスがポップアップ表示され、選択できます。

date

// Google、OPEN、Apple によってサポートされています
// 日付の選択を提供します
<input type="date" name="bday">

注: 下の黒い部分をクリックすると三角形の記號(hào) 次の日付選択ボックスが表示され、日付を選択できます。他の新しい時(shí)間タイプもこのスタイルを使用します。

datetime

// OPEN Apple サポート
// 時(shí)刻と日付の選択を提供します
<input type="datetime" name="bdaytime">

datetime-local

// Google OPEN Apple サポート
// タイムゾーンなしの日付と時(shí)刻
<input type="datetime-local" name="bdaytime">

// Firefox Google OPEN はサポートします
// 都市會(huì)議の提出時(shí)に自動(dòng)修正されるかどうかを確認(rèn)します値は有効です
<input type="email" name="email">

month

// Google Apple Openはサポートします
// タイムゾーンのない日付
<input type= "month " name="bdaymonth">

number

// 上位バージョン IE、Google Open、Apple でサポート
// 制限番號(hào)
// 最大最大最小最小ステップ間隔値デフォルト
<input type="number " name="數(shù)量" min="1" max="5">

注: 右側(cè)に 2 つの増加アイコンと減少アイコンがあります。

range

//IEの上位バージョン、Google Open、Appleサポート
//亂數(shù)、スライダーコントロール
//パラメータはnumberと同じです
<input type="range" name="points" min="1 " max="10">

// Google Apple サポート
// 検索ドメイン
<input type="search" name="googlesearch">

tel

// サポートなし
<input type="tel" name="usrtel">

time

// Google Apple Open サポート
// タイムコントローラー
<input type=" time " name="usr_time">

url

// 上位バージョン IE Firefox、Google でサポート
// 送信時(shí)に URL を確認(rèn)してください
<input type="url" name="homepage">

week

// Google と Apple によるサポート OPEN
// 週と年を定義します (タイムゾーンなし)
<input type="week" name="week_year">

表示現(xiàn)在のブラウズこれらの入力に対するサーバーのサポート

入力タイプ IE FF Operaro Chrome

search 未サポート未サポート未サポート未サポート

number サポート対象外未サポート 9.0 以降未サポート

範(fàn)囲未サポート未サポート 9.0 4.0 以降

color サポートされていませんサポートされていませんサポートされていません

tel サポートされていませんサポートされていません 9.0 以降サポートされていません

url サポートされていませんサポートされていません 9.0 以降サポートされていません

email サポートされていませんサポートされていません 9.0 以降サポートされていません

時(shí)間サポートされませんサポートされません 9.0 以降サポートされません

インスタンス 1:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>

            <form action="demo-form.php" method="get">
          Points: <input type="range" name="points" min="1" max="10">
          <input type="submit">
        </form>
        <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
      </body>
</html>

インスタンス 2:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>

            <form action="demo-form.php">
          數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">
          <input type="submit">
        </form>
        <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>
      </body>
</html>

インスタンス 3:

りー

學(xué)び続ける

新しいファイル

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="upload.php" method="post" accept-charset="utf-8" id="form1"> <br> 主頁(yè): <input type="url" name="url" value="" placeholder="個(gè)人主頁(yè)" required> <br> 郵箱: <input type="email" name="email" value="" placeholder="郵箱" required> <br> 生日: <input type="date" name="date" value="" required> <br> 時(shí)間: <input type="time" name="time" value="" required> <br> 星期: <input type="week" name="week" value="" required> <br> 年齡: <input type="number" name="age" value=""> <br> 薪水: <input type="range" name="range" value=""> <br> 電話: <input type="tel" name="tell" value="" placeholder="都不支持"> <br> 顏色: <input type="color" name="mycolor"> <br> <input type="search" name="key" value="" results="s"><br> <input type="submit" name="sub" value="提交" form="form1"> </form> </body> </html>

提出するリセットコード

自動(dòng)運(yùn)転