HTMLボタン：ステップバイステップガイド

このチュートリアルでは、 の使用方法について説明します。 HTMLのタグ 。また、カスタムボタンを作成するために使用できる属性についても説明し、これらの属性の実際の例をいくつか見ていきます。

HTMLフォームリフレッシャー

HTML フォームは、名前、電話番号、住所など、さまざまな種類のユーザー入力をWebページに収集するために使用されます。

各フォームには、ユーザーがWebサイトに情報を送信できるようにする入力要素が含まれています。たとえば、ウェブページには、ユーザーの名前、生年月日、クレジットカード情報などを収集するためのフォーム要素を含む注文フォームが含まれている場合があります。

<フォーム> タグは、 HTMLでフォームを作成するために使用されます 。

の簡単な例を次に示します。 ユーザーの名前を収集するフォームを作成するために使用されているタグ：

<form>
	Name: <input type="text">
</form>

フォームタグには、複数の を含めることができます タグ、または選択ボックスなどの他のユーザー入力要素。さらに、フォームには

を含める必要があります タグをクリックすると、ユーザーの情報がWebサイトに送信されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

HTMLボタン

<ボタン> タグを使用すると、 HTML内にクリック可能なボタンを作成できます 形。たとえば、支払い情報を収集するフォームがある場合、

がある可能性があります フォームの最後にあるので、ユーザーはそのデータをサイトに送信できます。

<ボタン> タグには開始タグと終了タグが必要であり、 typeの値も含める必要があります 属性。 type 属性は、後で説明するように、どのタイプのボタンをレンダリングする必要があるかをフォームに指示します。

これがHTMLの例です <ボタン> 動作中のタグ：

<button type="submit" value="Sign Up">Sign Up</button>

ボタンがWebページにどのように表示されるかを次に示します。

Webページにボタンが表示されたので、ユーザーは入力したフォームに入力した情報を送信できます。

<ボタン> タグはすべての主要なブラウザでサポートされているため、ブラウザの互換性を気にすることなく使用できます。ただし、ブラウザが異なれば

を解釈することに注意してください。 別の方法でタグ付けします。たとえば、バージョン9より前のInternet Explorerは、 の開始タグと終了タグの間にテキストを送信します。 要素、他のブラウザは valueのコンテンツを送信します 属性。

HTMLボタンタグ属性

HTML <ボタン> タグには、カスタムボタンの作成に使用できるいくつかの属性が含まれています。さらに、

タグはHTML5のグローバル属性をサポートします 。メインのHTMLを見てみましょう <ボタン> タグ属性の詳細。

オートフォーカス

autofocus 属性は、Webページがロードされたときにボタンが自動的にフォーカスを受け取るように指定するために使用されます。 autofocusの構文は次のとおりです 属性：

<button type="submit" autofocus>Test Button!</button>

無効

無効 属性はボタンを無効にします。これは、ユーザーが要素を操作できないことを意味します。 disableの構文は次のとおりです 属性：

<button type="submit" disabled>Test Button!</button>

以下に示すように、ボタンはグレー表示されており、クリックできません：

フォーム

form 属性は、ボタン要素をフォームにリンクするために使用されます。 formの値 属性はidと同じである必要があります フォームが関連するフォームの。送信ボタンをpizzaにリンクするフォーム属性の例を次に示します。 フォーム：

<form id="pizza">
	Flavor: <input type="text" name="flavor">
</form>
<button type="submit" form="pizza">Submit Order</button>

form 属性により、ボタンがID値 pizzaのフォームにリンクされました 。したがって、ボタンをクリックすると、IDが pizzaのフォームが表示されます。 提出されます。

フォーメーション

formaction ボタンによって送信された情報を処理するプログラムのURLを指定します。この属性は、 typeの場合にのみ使用できます ボタンの属性はsubmitと同じです 。

これがformactionの例です 使用中の属性：

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>

Formenctype

formenctype 属性は、フォームデータがサーバーに送信されるときにどのようにエンコードされるかを指定します。この属性は、「 method =’post’」を使用する場合にのみ使用してください。 フォームの「」属性。

これがformenctypeの例です ボタンがクリックされたときにプレーンテキストをサーバーに送信するために使用される属性：

<button type="submit" formenctype="text/plain">Submit Order</button>

Formmethod

formmethod HTTPを指定するために使用されます ブラウザがフォームを送信するために使用する方法。この属性は、「 type =’submit’」でのみ使用する必要があります 」属性。

formmethodで受け入れられる2つの値 属性はgetです およびpost 。情報を取得したり、 HTTPを実行したりする場合 GET 関数の場合、 getを使用する必要があります;情報を送信したり、 HTTPを実行したりする場合 POST 関数の場合、 postを使用する必要があります 。

formmethodの構文は次のとおりです 属性：

<button type="submit" formmethod="post">Submit Order</button>

Formnovalidate

formnovalidate 送信時にフォームデータを検証しないように指定するために使用されます。たとえば、ユーザーがすべてのフィールドに入力していなくてもユーザーの入力を受け入れたい場合は、 formnovalidateを使用する必要があります。 属性。

これがformnovalidateの例です 動作中：

<button type="submit" formnovalidate>Submit Order</button>

フォームターゲット

formtarget フォームが送信された後にサーバーが送信する応答のターゲットの場所を設定します。この属性で受け入れられる値は次のとおりです。_blank 、 _self 、 _parent 、 _top 、またはuframeの名前。

formtargetの構文は次のとおりです 属性：

<button formtarget="_blank">Submit Order</button>

名前

名前 タグは、ボタンの名前（他のすべてのフォーム要素名から一意である必要があります）を指定するために使用され、次の構文を使用します。

<button name="submit_order">Submit Order</button>

タイプ

type タグはボタンのタイプを指定します。使用できるボタンの種類は3つあります： button 、送信 、および reset 。 typeの構文は次のとおりです タグ：

<button type="submit">Submit Order</button>

値

value tagはボタンの初期値を指定します。 valueの構文は次のとおりです タグ：

<button type="submit" value="Submit Order">Submit Order</button>

結論

<ボタン> タグを使用して、 HTMLでクリック可能なボタンを作成できます 形。たとえば、ユーザーがピザを注文できるフォームがある場合は、

が必要になります。 準備ができたときにユーザーが注文に関する情報を送信できるようにするタグ。

このチュートリアルでは、

の使用方法について説明しました。 HTMLのタグ 。また、タグで使用してカスタムボタンを作成できる主な属性についても説明し、それらの属性を使用する方法の例をいくつか紹介しました。

これで、 HTMLを使用してボタンを作成する準備が整いました。 <ボタン> エキスパートのようにタグ付けしてください！