ホームページ > 記事 > ウェブフロントエンド > HTML検索ボックスを設定するにはどうすればよいですか? HTML検索ボックスでのinputタグの使用例
HTML検索ボックスを設定するにはどうすればよいですか? HTML検索ボックスでのinputタグの使用例
- 寻∝梦オリジナル
- 2018-09-04 16:44:5662272ブラウズ
この記事では主に HTML 検索ボックスの設定と、HTML 検索ボックスの input タグの使用例について説明します。次に、HTML 検索ボックスに関するこの記事を一緒に読みましょう
まず。シンプルな検索ボックスを設定してみましょう:
<input type="text" class="aa"><input type="button" value="搜索" class="bb">
これは、非常に複雑なスタイルを含まない、最も単純なスタイルの検索ボックスです。スタイルを設計する必要がある場合は、class="aa" に従ってスタイルを記述できます。もちろん、これはボックスのスタイルです。 bb{} の場合は、括弧内のコードを入力するだけです。ブラウザに表示される効果は次のとおりです:
これは単純な検索ボックスのコードです。
それでは、input タグの使用方法について話しましょう。まず例を見てみましょう
より高度な検索ボックスの完全なコードを見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHP中文网</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box{
width: 380px;
margin: 30px auto;
font-family: 'Microsoft YaHei';
font-size: 14px;
}
input{
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
}
#search{
width: 78px;
height: 32px;
float: right;
background: black;
color: white;
text-align: center;
line-height: 32px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="search" placeholder="请输入关键字">
<div id="search">搜索</div>
</div>
</body>
</html>このコードのレンダリングを見てください:
このエフェクトは最初のものよりもはるかにきれいですが、コードが少し増えており、基本的な CSS スタイルの知識がすべて必要になります。何かわからない場合は、以下にメッセージを残してください。
注: 要素は空であり、ラベル属性のみが含まれます。
ヒント:
上記は HTML 入力タグの使用法に関する記事です。ご質問がございましたら、以下にメッセージを残してください。
【編集者のおすすめ】
HTML空間コードの書き方は？ HTML空間コードの表現方法まとめ
HTMLドロップダウンメニューの作り方は？ HTML ドロップダウン メニューのコード例の紹介
以上がHTML検索ボックスを設定するにはどうすればよいですか? HTML検索ボックスでのinputタグの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。