HTMLフォーム
HTML フォームと入力
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。
オンライン例
テキストフィールドの作成 (テキストフィールド)
この例は、HTML ページにテキストフィールドを作成する方法を示します。ユーザーはテキストフィールドにテキストを書き込むことができます。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p> </body> </html>
サンプルの実行 »
オンラインサンプルを表示するには、[サンプルの実行]ボタンをクリックしてください
パスワードフィールドを作成する
この例は、HTMLパスワードフィールドを作成する方法を示しています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
(他の例はこのページの下部にあります。)
HTMLフォーム
フォームはフォーム要素を含む領域です。
フォーム要素を使用すると、ユーザーはテキスト領域、ドロップダウン リスト、ラジオボタン、チェックボックスなどのコンテンツをフォームに入力できます。
フォームでは、フォーム タグ <form> を使用して次の設定を行います:
<form> . input 元素 . </form>
HTML フォーム - 入力要素
ほとんどの場合に使用される form タグは、input タグ (<input>) です。
入力の型はtype属性(type)で定義されます。一般的に使用される入力タイプのほとんどは次のとおりです。
テキスト フィールド
テキスト フィールドは、ユーザーがフォームに文字と数字を入力するときに <input type="text"> を通じて設定されます。コンテンツにはテキストフィールドが使用されます。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>ブラウザでは次のように表示されます:
注: フォーム自体は表示されません。また、ほとんどのブラウザでは、テキスト フィールドのデフォルトの幅は 20 文字です。
パスワードフィールド
パスワードフィールドはタグ<input type="password">によって定義されます:
<form> Password: <input type="password" name="pwd"> </form>ブラウザの表示効果は次のとおりです:
注: パスワードフィールドの文字は表示されません。プレーンテキストで表示されますが、アスタリスクまたはドットに置き換えられます。
ラジオボタン
<input type="radio"> フォームのラジオボタンオプションを定義します
チェックボックス
<input type="checkbox" > ユーザーは、指定された選択肢から 1 つまたは複数のオプションを選択する必要があります。
送信ボタン
<input type="submit"> は送信ボタンを定義します。
ユーザーが確認ボタンをクリックすると、フォームのコンテンツが別のファイルに転送されます。フォームの action 属性は、宛先ファイルのファイル名を定義します。通常、action 属性で定義されたファイルは、受信した入力データに対して関連する処理を実行します。 :
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>ブラウザの表示効果は次のとおりです:
上のテキストボックスに数文字入力して確認ボタンをクリックすると、入力データが「html_form_action.php」ページに送信されます。このページには入力した結果が表示されます。
その他の例
ラジオ ボタン
この例は、HTML でラジオ ボタンを作成する方法を示します。
インスタンス
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
チェックボックス
この例では、HTML ページにチェックボックスを作成する方法を示します。ユーザーはチェックボックスをオンまたはオフにできます。
インスタンス
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
単純なドロップダウンリスト
この例は、単純なドロップダウンリストを作成する方法を示していますHTML ページ内のボックス。ドロップダウン リスト ボックスは選択可能なリストです。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> <p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
事前選択されたドロップダウンリスト
この例では、事前に選択された値を含む単純なドロップダウンリストを作成する方法を示します。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html>
例の実行 »
「例の実行」ボタンをクリックしてオンライン例を表示します
テキストエリア
この例では、テキストエリア(複数行のテキスト入力コントロール)を作成する方法を示します。 ）。ユーザーはテキストフィールドにテキストを書き込むことができます。書き込める文字数に制限はありません。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
ボタンの作成
この例は、ボタンの作成方法を示しています。ボタン上のテキストをカスタマイズできます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
フォームの例
枠線付きフォーム
この例では、データの周囲にタイトルを含むボックスを描画する方法を示します。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力ボックスと確認ボタンのあるフォーム
この例は、フォームを追加する方法を示していますページへ。このフォームには 2 つの入力ボックスと確認ボタンが含まれています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
チェックボックス付きのフォーム
このフォームには、2つのチェックボックスと確認ボタンが含まれています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
ラジオボタン付きのフォーム
このフォームには、2つのラジオボタンと確認ボタンが含まれています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="提交"> </form> <p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
フォームからメールを送信します
この例は、からメールを送信する方法を示しています。フォーム。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br> <input type="submit" value="提交"> </form> </body> </html>
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
HTMLフォームタグ
新規: HTML5の新しいタグ
| タグ | の説明 |
|---|---|
| <form> | ユーザー入力用のフォームを定義します |
| <入力> | 入力領域を定義します |
| <textarea> | テキスト領域を定義します(複数行の入力コントロール) |
| <label> | は<input&gを定義しますt;要素label は、通常、入力タイトル |
| <fieldset> | に関連するフォーム要素のセットを定義し、外側のフレームを使用してそれを囲みます |
| <legend> | は < を定義します。 fieldset> 要素のタイトル |
| <select> | はドロップダウン オプション リストを定義します |
| <optgroup> | はオプション グループを定義します |
| <オプション& gt; | ドロップダウンリストの定義 |
| <button> | クリックボタンを定義 |
| <datalist> | 指定事前定義された入力制御オプションのリスト |
| <keygen> ; | はフォームのキーペア生成フィールドを定義します |
| <output> | は計算結果を定義します |
