HTML 記事: Web ページに入力ボックス効果を実装する方法 (詳細なコード説明)-htmlチュートリアル-php.cn

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

奋力向前

リリース： 2021-08-17 17:06:00

オリジナル

18413 人が閲覧しました

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

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

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

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

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

#コード例

<body>
<input type="text">
</body>

ログイン後にコピー

コードの効果

#コードは完成しました。これは誰もがよく知っていると思います。これは入力ボックスです。

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

#コード例

<body>
<p>用户名：</p>
<input type="text">
</body>

ログイン後にコピー

コードの効果

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

を使用し、1 行にまとめます。

コード例

<body>
<div>
用户名：
<input type="text">
</div> 
</body>

ログイン後にコピー

コードの効果

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

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

<body>
<div>
用户名：
<input type="text">
</div> 
<div>
密码：
<input type="text">
</div> 
</body>

ログイン後にコピー

#コードの効果

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

password

を使用します。コード例

密码：
<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 ページに入力ボックス効果を実装する方法 (詳細なコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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