1. Home
  2. HTMLフォーム

HTMLフォーム2024 年の最新の入門チュートリアル。このコースでは オンラインの例,HTMLフォーム,HTMLフォーム - 入力要素,テキストフィールド（テキストフィールド）,パスワード欄,ラジオボタン（ラジオボタン）,チェックボックスをオンにします（チェックボックス）,[送信]ボタンを（送信ボタン）,より多くの例,フォームインスタンス,HTMLフォームタグ, について学習できます。

HTMLフォーム

HTMLフォームは、ユーザ入力の種類を収集するために使用されます。

例

オンラインの例

テキストフィールドを作成します（テキストフィールド）
この例では、HTMLページにテキストフィールドを作成する方法を示します。 ユーザーがテキストフィールドにテキストを書き込むことができます。

パスワードフィールドを作成します。
この例では、HTMLのパスワードフィールドを作成する方法を示します。

（このページの下部に、より多くの例を見つけることができます。）

HTMLフォーム

フォームは、フォーム要素を含む領域です。

フォーム要素は、例えば、ユーザーがフォームの内容を入力できるようにすることです。というようにテキストフィールド（テキストエリア）、ドロップダウンリスト、ラジオボタン（ラジオボタン）、チェックボックス（チェックボックス）と。

フォームは、フォームタグ<form>のセットを使用しています。

<form>
.
input 元素
.
</form>

HTMLフォーム - 入力要素

ほとんどの場合、使用されるフォームタグはinputタグ（<入力>）です。

入力タイプは、type属性（タイプ）の定義です。 次のように最も頻繁に使用される入力タイプは次のとおりです。

テキストフィールド（テキストフィールド）

テキストフィールドユーザーは、文字、数字、およびフォーム内の他のコンテンツを入力するときに設定するの<input type = "text">タグを使用して、テキストフィールドが使用されます。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

ブラウザは次のように表示されます

ファーストネーム：
姓：

注：フォーム自体が表示されていません。また、ほとんどのブラウザでは、テキストフィールドのデフォルトの幅は20文字です。

パスワード欄

タグの<input type = "パスワード">によるパスワードフィールドを定義するには：

<form>
Password: <input type="password" name="pwd">
</form>

ブラウザは、次のような効果が表示されます。

パスワード：

注：パスワードフィールドの文字がクリアテキストで、その代わりにアスタリスクまたはドットで表示されません。

ラジオボタン（ラジオボタン）

<入力タイプは= "ラジオ">タグは、テーブルだけではボックスのオプションを定義します

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

ブラウザは、次のような効果が表示されます。

マレ
女性

チェックボックスをオンにします（チェックボックス）

<入力タイプ= "チェックボックスが">は、チェックボックスを定義します。ユーザーは、いくつかの与えられた選択肢の中から1つまたはいくつかのオプションを選択する必要があります。

<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>

ブラウザは、次のような効果が表示されます。

私は自転車を持っています
私は車があります

[送信]ボタンを（送信ボタン）

<入力タイプは、= "提出">送信ボタンを定義します。

ユーザーが[OK]ボタンをクリックすると、フォームの内容は別のファイルに転送されます。 フォームのaction属性は、宛先ファイルのファイル名を定義します。 通常、治療に関連した入力データを受け取っていたファイルのaction属性によって定義されています。 ：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

ブラウザは、次のような効果が表示されます。

ユーザー名：

あなたは上記のテキストボックスに数文字を入力した場合、[OK]ボタンをクリックし、入力データが「html_form_action.php」ページに転送されます。 このページには、入力された結果が表示されます。

それをお試しください より多くの例

ラジオボタン（ラジオボタン）
この例では、HTMLでラジオボタンを作成する方法を示します。

チェックボックスをオンにします（チェックボックス）
この例では、HTMLページにあるチェックボックスを作成する方法を示します。 ユーザーがチェックボックスを選択または選択解除することができます。

シンプルなドロップダウンリスト
この例では、HTMLページに簡単なドロップダウンリストボックスを作成する方法を示します。 ドロップダウンリストボックスは、オプションのリストです。

事前選択のドロップダウンリスト
この例では、予め選択された値を持つ単純なドロップダウンリストを作成する方法を示します。

テキストフィールド（テキストエリア）
この例では、テキストフィールド（複数行のテキスト入力コントロール）を作成する方法を示します。 ユーザーがテキストフィールドにテキストを書き込むことができます。 言葉の書き込み可能な文字が限定されるものではありません。

ボタンを作成します。
この例では、ボタンを作成する方法を示します。 あなたがカスタマイズすることができ、ボタン上のテキストことができます。

それをお試しください フォームインスタンス

国境を持つフォーム
この例では、タイトルのデータの周りにボックスを描画する方法を示します。

入力ボックスとボタンを持つフォームを確認します
この例では、フォームページを追加する方法を示します。 この形式は、2つの入力フィールドと確認ボタンが含まれています。

チェックボックスを持つフォーム
この形式は、2つのチェックボックス、および確認ボタンが含まれています。

ラジオボタンを持つフォーム
この形式は、2つのボックスと確認ボタンが含まれています。

フォームから電子メールを送信
この例では、フォームから電子メールを送信する方法を示しています。

HTMLフォームタグ

新：HTML5新しいラベル

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果

ホットチュートリアル

お問い合わせ

HTMLフォーム
10/30