入力タイプ summary_html/css_WEB-ITnose

フォームの中で最も種類が多い要素がInputです。

type=text

入力タイプはテキストです。これは、ユーザー名を入力するためのログイン、電話番号、電子メール、自宅の住所などを入力するための登録など、私たちが最もよく目にし使用するものです。もちろん、これはデフォルトの入力タイプでもあります。
パラメータ名: テキスト入力ボックスの名前も表します。
パラメータサイズ: 入力ボックスの長さ。
パラメータ maxlength: 入力ボックスに入力できる最大文字数。
パラメータ値: 入力ボックスのデフォルト値。
特殊パラメータ readonly: ボックスが表示のみ可能で、追加または変更できないことを示します。

<form> your name: <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br> <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"> </form> 

type=password

言うまでもなく、パスワード入力ボックスは一目で分かりやすいです。この入力ボックスに情報を入力すると、機密文字が表示されることが最大の違いです。
パラメータは「type=text」に似ています。

<form> your password: <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15 </form> 

type=file

写真を BBS にアップロードしたり、添付ファイルを EMAIL にアップロードするときに不可欠なもの:)
名前やサイズなどのパラメーターを使用して、ファイル ディレクトリを入力するためのプラットフォームを提供します。

<form> your file: <input type="file" name="yourfile" size="30"> </form> 

type=hidden

非常に注目すべきフィールドで、通常は隠しフィールドと呼ばれます。非常に重要な情報を次のページに送信する必要があるが、明示的に記載できない、またはできない場合です。
一言で言えば、ページ上のどこに隠れているのかがわかりません。最も便利なのは非表示の値です。

<form name="form1"> your hidden info here: <input type="hidden" name="yourhiddeninfo" value="cnbruce.com"> </form> <script> alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) </script>

type=button

もちろん、ボタンを特定のページにジャンプさせるには、JavaScript コードを追加する必要があります

<form name="form1"> your button: <input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')"> </form>

type=checkbox

複数の選択ボックス、共通 趣味や性格などを登録時に選択してください。パラメーターには、名前、値、およびチェックされた特別なパラメーター (デフォルトの選択を示す) が含まれます。実際、最も重要なのは値であり、処理ページに送信される値です。 (追記: 名前の値は異なる場合がありますが、お勧めしません。)

<form name="form1"> a:<input type="checkbox" name="checkit" value="a" checked><br> b:<input type="checkbox" name="checkit" value="b"><br> c:<input type="checkbox" name="checkit" value="c"><br> </form> name值可以不一样，但不推荐<br> <form name="form1"> a:<input type="checkbox" name="checkit1" value="a" checked><br> b:<input type="checkbox" name="checkit2" value="b"><br> c:<input type="checkbox" name="checkit3" value="c"><br> </form>

type=radio

つまり、複数選択のページ設定にラジオ ボタン ボックスが表示されます。パラメータには名前、値、および特別なパラメータもチェックされています。

チェックボックスとは異なり、名前の値は同じである必要があります。そうでない場合は、複数を選択できません。もちろん、処理ページに送信された値はそのままの値です。

<form name="form1"> a:<input type="radio" name="checkit" value="a" checked><br> b:<input type="radio" name="checkit" value="b"><br> c:<input type="radio" name="checkit" value="c"><br> </form> 下面是name值不同的一个例子，就不能实现多选一的效果了<br> <form name="form1"> a:<input type="radio" name="checkit1" value="a" checked><br> b:<input type="radio" name="checkit2" value="b"><br> c:<input type="radio" name="checkit3" value="c"><br> </form>

type=image

さらに別の方法として、効果を自分で確認してください。投稿画像として使用できます

<form name="form1" action="xxx.asp"> your Imgsubmit: <input type="image" src="../blog/images/face4.gif"> </form>

type=submit と type=reset

は、「submit」と「reset」です2 つのボタン

submit の主な機能は、フォーム内のすべてのコンテンツを処理のためにアクション ページに送信することであり、リセット機能は、入力されたすべてのコンテンツをすばやくクリアすることです。

HTML5 の新しい入力タイプ

email

url

number

range

日付ピッカー (日付、月、週、時刻、日時、日時ローカル)

検索

カラー

email

フォームを送信するとき、Eメールの形式はOperaブラウザにname属性がなければ自動的に検証されます。そうでない場合は機能しません

url

フォームが送信すると、URL ドメインの値が自動的に検証されます。

number

入力数値を制限できます、ステップは前の数値と次の数値の間の間隔です

効果:

range

rangeタイプは数値を含む必要がある入力に使用されます一定範囲のエリア内。

範囲タイプはスライダーとして表示されます。

受け入れられる数に制限を設定することもできます。属性は数値と同じです

効果:

日付ピッカー

HTML5 には日付と時刻を選択するための複数の新しい入力タイプがあります:

date - 日、月、年を選択します

month - 月、年を選択します

Week - 週と年を選択します

time - 時間 (時間と分) を選択します

datetime - 時間、日、月、年 (UTC 時間) を選択します

datetime-local - 時間、日、月、年 (ローカル) を選択します時間) )

効果:

search

検索タイプは、サイト検索や Google 検索などの検索フィールドに使用されます。検索フィールドは通常のテキスト フィールドとして表示されます。

すごいです

ここでのデータリストはドロップダウン リストに相当します。選択を行うことができます。効果は次のとおりです:

color

色を取得できます

効果: