ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)

奋力向前
リリース: 2021-08-17 17:06:00
オリジナル
18501 人が閲覧しました

前回の記事「HTMLテキストに順序付きリストと順序なしリストを追加する方法をステップごとに教えます(詳細なコード説明)」では、HTMLを使用して順序付きリストを追加する方法を紹介しました。テキスト。順序なしリストを使用します。次の記事では、HTML Web ページに入力ボックス効果を実装する方法を紹介します。一緒にその方法を見てみましょう。

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)

タグ仕様: ユーザー情報を収集し、テキスト フィールド、チェック ボックス、ラジオなどのさまざまな形式でフィールドを入力します。ボタンなど

入力ボックスを追加する方法

このタイプは、txt テキスト タイプなどのタイプを示します。デフォルトの A タイプです。どのようなものかをコード例で見てみましょう。

#コード例

<body>
<input type="text">
</body>
ログイン後にコピー

コードの効果

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)#コードは完成しました。これは誰もがよく知っていると思います。これは入力ボックスです。

を使用して、その前にテキスト行を追加して試してみることができます。

#コード例

<body>
<p>用户名:</p>
<input type="text">
</body>
ログイン後にコピー

コードの効果

# あなたユーザー名が表示されますが、ユーザー名の後に何かがあるので、パスワードを追加します。見やすくするために

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明) を使用し、1 行にまとめます。

コード例

<body>
<div>
用户名:
<input type="text">
</div> 
</body>
ログイン後にコピー

コードの効果

最後はほぼこんな感じです状態にパスワードはありますか?

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)コード例

<body>
<div>
用户名:
<input type="text">
</div> 
<div>
密码:
<input type="text">
</div> 
</body>
ログイン後にコピー

#コードの効果


# このパスワードは誰でも見ることができますが、通常はパスワードは表示されないため、これは少し不適切です。パスワード効果を実現するには、

password

を使用します。 HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)コード例

密码:
<input type="password">
ログイン後にコピー
コードの効果

パスワードはほぼこの中にありますstate 、この Web ページでは比較的一般的なものです。次にチェックボックスを実装するにはどうすればよいでしょうか? checkbox を使用すると、

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)コード例

<div>
1选项
<input type="checkbox">
2选项
<input type="checkbox">
3选项
<input type="checkbox">
</div>
ログイン後にコピー
コード効果

を実現できます。

これはチェックボックスです。次にラジオボタンについて話しましょう。これはインターネットでより一般的に使用されます。私たちはこれを使用します。入力は radio
To を使用して行うことができますラジオボタンを実装します。

HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)コード例

单选:
<input type="radio">
ログイン後にコピー
コード効果

このラジオに加えて、色も比較的存在感のあるものです。 #コード例

<div>
<input type="color">
</div>
ログイン後にコピー
HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)

コードの効果

#ご覧のとおり、これは興味深いもので、色を直接変更できます。
わかりました、完了しました!

推奨学習: HTML ビデオ チュートリアルHTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)

以上がHTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート