HTML フォーム コンポーネントのサンプル コード

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTML フォーム コンポーネントのサンプル コードです。興味のある方は参照してください。

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。

<!DOCTYPE html>  
<html>  
<ヘッド>  
<メタ文字セット="UTF-8">  
<title>ここにタイトルを挿入</title>  
</head>  
<本文>  
    <!--  
    サーバーにデータを送信する場合、フォーム内のコンポーネントには、サーバーからデータを取得するための名前属性と値属性が必要です。  
<from>名前を入力してください:<input type="text" name="user" value=""/><br/>  
        パスワードを入力してください: <input type="password" name="passwd" value=""/>  
        <br/>  
      性別を選択してください:<input type="radio" name="sex" value="nan"/> 男性<input type="radio" name="sex" value="nv" selected="checked"/> 女性<br/>  
    テクノロジーを選択:  
        <input type="checkbox" name="tech" value="java"/>Java  
        <input type="checkbox" name="tech" value="html"/>html  
        <input type="checkbox" name="tech" value="css"/>CSS<br/>  
    ファイルを選択:  
        <input type="file" name="file" /><br/>  
    画像: <input type="image" src="11.jpg" ><br/>  
    <!-- データはクライアント側で指定する必要はなく、サーバーに送信できます -->  
    非表示のコンポーネント: <input type="hidden" name="mykey" value="myvalue"/><br/>  
    ボタン: <input type="button" value="ボタンがあります" onclick="alert('ボタンがあります')"><br/>  
    <select name="国">  
        <option value="none">--国を選択-</option>  
        <option value="usa">アメリカ合衆国</option>  
        <option value="en">イギリス</option>  
        <option value="cn" selected="selected">中国</option>  
    </選択>  
    <テキストエリア名="テキスト"></テキストエリア>  
    <br/>  
    <input type="reset" value="データを消去"/><input type="submit" value="データを送信"/>  
<から>  
</本文>  
</html>

要約する

上記はエディターが紹介した HTML フォーム コンポーネントのサンプル コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Nginx と Lua を使用した JWT 検証の概要

>>:  ::before/:before と ::after/:after の使用に関する深い理解

推薦する

この記事は、JQueryの基本的な操作を理解し、始めるのに役立ちます。

目次1. Jquery を使用する手順: （1）jsライブラリをインポートする（２）ページ読み込みイ...

Vue3スタイルのCSS変数注入の実装

目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...

ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...

CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明

目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法

Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...

Ubuntu 18.04 に Apache、MySQL、PHP、LAMP をインストールするための完全なチュートリアル

1. Apacheをインストールする $ sudo apt update && su...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ（推奨）

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

MySQL の列から行への変換と年月グループ化の例

以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...

MySQLはJSON内部フィールドを抽出し、数値としてダンプします

目次背景問題分析1. 属性値はJson形式であり、Json操作関数を使用して処理する必要があります。...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

CSS で QR コードスキャンボックスを実装するためのサンプルコード

カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...