ホームページ > 記事 > ウェブフロントエンド > HTML5のformタグの使い方を詳しく解説

HTML5のformタグの使い方を詳しく解説

小云云オリジナル: 2018-03-05 14:50:032523ブラウズ

この記事では主に HTML5 の form タグの使用法について詳しく説明します。コード例も交えて説明します。

文法:

で終わります。最後に、フォームをそれらの間に配置する必要があります。 ...

フォーム

メソッド
=「投稿」アクション= 「save.php」> ️ ラベル>
<input type=「テキスト」名前=「ユーザー名」 />
<label for="pass">密コード:label >
<入力タイプ=「パスワード」名前=「パス」 />
form>

テキスト入力ボックス、パスワード入力ボックス

ユーザーが文字やデータなどを入力する必要がある場合に使用されますフォームテキスト入力ボックス、テキスト入力ボックスはパスワード入力ボックスにも変換できます

構文:

<form>
< inputtype = 「テキスト/パスワード」名前 = 「名前」値 = 「テキスト」 />
フォーム>

タイプがテキストの場合、テキスト入力ボックスです

typeがpasswordの場合、パスワード入力ボックスになります

2.name: バックエンドasp php useのテキストボックスに名前を付けます

3.value: テキスト入力ボックスのデフォルト値を設定します(通常はプロンプト関数から開始)

>
<html >
<head>
"Content-Type" content= 「テキスト/html; charset=utf-8」 >
<title>テキスト入力ボックス、パスワード入力ボックスtitle>
頭>
<体>
< フォームメソッド= 「投稿」アクション=「save.php」>
アカウント:
<input type = "text" name = "myName" />
br />
秘密コード：
<入力 type = "パスワード" 名前 = "パス"/>
フォーム>
body>
html>

結果:

アカウント:
パスワード:

テキストフィールド: 複数行のテキスト入力をサポート

ユーザーがフォームに長いテキストを入力する必要がある場合、テキスト入力フィールドが使用されます

構文:

<textarea rows = 「行数」 cols = 「列数」 > text < ;/ETextarea & gt; 説明: 1. テキスト入力ドメインは & lt; textarea & gt; で始まります。 .cols: テキスト入力フィールドの列数を入力します

4. の間にデフォルト値

を入力します。

>
<html>
<頭 >
meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<title>文メインフィールドtitle >
頭>
<体>
<フォームメソッド = 「投稿」アクション = 「save.php」>
<ラベル> はじめにラベル>
<textarea rows = "5" cols = "10" >ここにコンテンツを入力してください... テキストエリア>スパン>
< input type = 「送信」値 = 「OK 」
<input type = 「リセット」値 = 「リセット」名前 = 「リセット」 />
フォーム>
ボディ
>

html
>
詳しい説明は後ほど。ラジオボタンやチェックボックスを使ってユーザーに選択させよう

<input type = 「ラジオ/チェックボックス」値 = 「値」名前 = 「名前」 checked = 「checked」 />

説明:

1. タイプ: ラジオ: コントロールシングルチェックボックス

チェックボックス: コントロールチェックボックス

2. 値: サーバーにデータを提供する値

3. 名前: バックグラウンドプログラム ASP および PHP で使用するコントロールに名前を付けます

4.checked: 設定された場合selected = "チェック済み"、このオプションはデフォルトでチェックされています。

<頭>
<metahttp-equi v= 「コンテンツタイプ」コンテンツ="text/html; charset=utf-8">
<タイトル> マーキー、チェックボックスタイトル>
頭> <
>
<フォーム名前 = 「iForm」メソッド = 「投稿」アクション = "save.php 「>
旅行は好きですか？」 <br />
<input type = 「ラジオ」名前 = 「radioLove」値 = 「いいね！」チェック済み = 「チェック済み」/>スパン>
<入力タイプ = 「ラジオ」名前 = 「radioLove」値 = 「嫌い」/>
<input type = 「ラジオ」名前 = 「radioLove」 value = 「そうではありません」どうでもいいよ」 />
/> どのスポーツに興味がありますか？ <br />
<input type = "checkbox" name = "checkbox1" 値 = 「ランニング」 />
name = "checkbox1" value = "プレイボール" チェック済み = "チェック済み「/>」
<input type = "checkbox" name = "checkbox1" 価値 = 「登山」チェック済み = "チェック済み"/>
タイプ" チェックボックス「名前 = 」チェックボックス1 "価値 = 「フィットネス」 />
フォーム>
ボディ>
html>

結果:

旅行は好きですか?

どんなスポーツに興味がありますか？

注: 同じグループ内のラジオボタンが機能できるように、同じグループ内のラジオボタンの名前の値は一貫している必要があります。ラジオの選択の役割として。

ドロップダウンリストボックス

スペースを節約するには、ドロップダウンリストボックスを使用します。単一または複数の選択を選択できます。

単一選択:

>
<html>
<頭>
<メタ http-equiv="Content-Type" content="text/html; charset=utf-8"> <
title
>
ドロップダウンページテーブルボックスtitle>
head
>
<本体>
<フォーム名前 = 「iForm」メソッド = 「投稿」アクション = 「save.php」>
< ラベル>愛し好:< ;/ラベル>
<select>
️オプション
スパン> >スポーツオプション> ;
オプション> <オプション価値 = 「旅行」>
オプション&g t; ;オプション値 = ;ショッピング
オプション
>
<スパン style="color:#ff0000;">select > >
ボディ
>
html
>
(プルダウン可能)
Submit value: サーバーに送信された値ですOption: 表示される値です選択されたセット= "selected" と、オプションはデフォルトで選択されます。複数選択:
上記のに変更し、Windows では Ctrl キーを押しながらクリックし、Mac では Command キーを押しながらクリックします

データを送信するには送信ボタンを使用します

フォームで使用できるボタンは、送信ボタンとリセットの 2 つです。ユーザーがサーバーに情報を送信する必要がある場合は、送信ボタンを使用する必要があります。

文法:

説明:

1. type = "sumit"の場合のみ、ボタンはsubmit

2.valueの機能を持ちます。ボタンに表示される単語

リセット

ユーザーがフォーム情報を初期状態にリセットする必要がある場合、リセットボタンを使用できます。リセットするタイプを変更するだけです。

説明:

1. type = "reset"の場合のみ、ボタンにはリセット機能があります

。 2 .value: ボタン

label label

label label に表示されるテキストは、マウスユーザーの使いやすさを向上させるためのものではありません。つまり、ユーザーがクリックしてラベルを選択すると、ブラウザーは自動的にラベルに関連するフォームコントロールにフォーカスを向けます (ラベルに関連付けられたフォームコントロールが自動的に選択されます);

構文:

注: ラベルの for 属性の値は、関連するコントロールの

と同じである必要があります。

<フォーム>
=「男性」> 男性ラベル> ;
<input type=「ラジオ」名前=「性別」 <スパンスタイル="color:#ff0000;">id="男性"スパン> />
<br />
<ラベル for=「女性」>女ラベル >
<入力タイプ=「ラジオ」名前=「性別」 < スパンスタイル= "color:#990000;">id="女性"span> />
<ラベル for="メール">メールアドレスを入力してくださいラベル>
<input type="email" <span style =「カラー:#ff6666;」 >id="メールアドレス"スパン>プレースホルダー="メールアドレスを入力" &gて;
フォーム>

結果:

男性女性
メールアドレスを入力してください

以下は私がコピーして確認できるものです:

>
< html >
<頭> <メタ
http-equiv
= "コンテンツタイプ"content="text/html; charset=utf-8">
<title> フォーム内のラベルタグ title>
頭 >
<ボディ>
<フォーム>
興味のあるスポーツ: <br/>
<label for = "sport1">遅い跑ラベル>
<入力タイプ = 「チェックボックス」名前 = 「スポーツ」 id = "sport1"/> ;
<br />
<label for = "sport2">登山lab el>
<入力タイプ = 「チェックボックス」名前 = 「スポーツ」 id = "スポーツ2"/> ;
<br />
<label for = "sport3">篮球ラベル>
<入力タイプ = 「チェックボックス」名前 = 「スポーツ」 id = "sport3"/> ; <br />
フォーム>
ボディ>
html>

結果:

興味のあるスポーツ:
ジョギング
登山
バスケットボール

HTML5のformタグの使い方を詳しく解説

関連記事