ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 の新しいフォーム コントロールとフォーム属性とは何ですか?

HTML5 の新しいフォーム コントロールとフォーム属性とは何ですか?

王林
王林転載
2021-03-11 10:42:503234ブラウズ

HTML5 の新しいフォーム コントロールとフォーム属性とは何ですか?

HTML5 は、インターネットの次世代標準であり、インターネット コンテンツを構築および表示するための言語方法です。インターネットの中核技術の 1 つと考えられています。

HTML5 は、Web の中核となる言語 HTML の仕様です。ユーザーが何らかの手段で Web を閲覧する際に目にするコンテンツは、もともと HTML 形式であり、内部で何らかの技術的な処理を経て、認識可能な形式に変換されます。ブラウザの情報。 HTML5 は以前の HTML4.01 をベースに一定の改良を加えたものであり、技術者が開発プロセス中にこれらの新しい技術を適用することはできませんが、Web サイト開発の技術者はこの技術の新しい機能を認識する必要があります。

新しい入力フォーム コントロール:

  • email: 電子メール テキスト ボックス、通常のものと変わりません

  • - 入力時にはメール アドレスではありません。検証は失敗します。

  • # - モバイル端末のキーボードが変わります。

  • # 電話番号: 電話番号
  • url: ウェブページの URL
  • search: 検索エンジン
  • - Chrome でテキストを入力すると、閉じた
  • ## - 例: js を使用して現在の値を表示します

  • ## 数値: 数値のみを含めることができる入力ボックス

  • # - 入力ボックスの最後に 2 つの矢印があります。上の矢印はプラスを表し、下の矢印はマイナスを表します。

  • カラー: カラー セレクター

  • # - クリックしてカラー バージョンを表示します
  • datetime: 完全な日付を表示します
  • -選択スタイルの選択と同様
  • # datetime-local: 完全な日付を表示します。タイムゾーンを除く日付です。
  • time: タイムゾーンを除く、時刻を表示します。
  • # date: 日付 {年、月、日} を表示します
  • 週: 週 {年、月、日、週}# を表示します
  • ## 口: {年、月} の月を表示します

  • ## (無料ビデオ チュートリアル:

    html ビデオ チュートリアル

    )
  • <form>
      <input type="email" />
      <input type="tel" />
      <input type="url" />
      <input type="search" />
      <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
      <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
      <input type="submit" />
    </form>
  • 新しいフォームの機能と機能

  • プレースホルダー: 入力ボックス プロンプト情報

  • - 例: Weibo パスワード ボックス プロンプト

autocomplete

- デフォルトはオンで、プロンプト選択をオフにします。

    ## autofocus: フォームを指定します。入力フォーカス
  • リストとデータリストを取得するには: 入力ボックスの選択リストを構築します
  • - リストの値は、 datalist タグ
  • ## 必須: このオプションは必須であり、空にすることはできません
  • ## パターン: 通常の検証

  • - pattern="\d{1,5}"

  • Formaction は submit で送信アドレスを定義します

  • <input type="text"
      placeholder="请输入4-16个字符" // 输入框内显示
      autocomplete="off" // 是否记录输入的值
      autofocus // 聚焦
      required // 输入框不能为空
      pattern="\d{1,5}" // 必须输入1到5个数字
     />
    //  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验
    
    // 如果用户在某个页面输入相当多的数据,临时有事需要离开一段时间,此时数据应该保存至草稿箱,那么同一个form表单下,将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
    <form action="https://www.baidu.com">
      <input type="text">
      <input type="submit" value="提交" />
      <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
    </form>

    関連する推奨事項:

    html5 チュートリアル
  • #

以上がHTML5 の新しいフォーム コントロールとフォーム属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。