ホームページ > 記事 > ウェブフロントエンド > (10) CSSを使用してform_html/css_WEB-ITnoseを作成します
(10) CSSを使用してform_html/css_WEB-ITnoseを作成します
- WBOYオリジナル
- 2016-06-24 11:15:181266ブラウズ
1. cssを使ってフォームを作成する
この記事では主にcssを使ってフォーム要素を設定する方法を紹介します。
フォームは、Web ページとユーザー間の対話に不可欠な要素です。フォームは、オンライン登録、オンライン ログイン、オンライン トランザクション、オンライン投票、Web サイト メッセージなど、誰もがよく目にする Web ページと対話するためのインターフェイスです。ボードなど
フォームはサーバーにデータを送信するために使用されます。
フォームには、よく使用される入力ボックス、テキスト ボックス、ラジオ オプション、チェック ボックス、ドロップダウン メニュー、ボタンなど、多くの要素があります。
HTML 部分:
フォーム: フォームの範囲を定義します。
入力: フォーム内の特定のフォーム要素をそれぞれ定義します。
name: 名前、この列の名前を設定します。プログラムでよく使用されます。
size: 数値、この列の幅を設定します。
値: デフォルトの内容。このフィールドのデフォルトの内容を設定します。
align: 配置、この列の配置を設定します。
maxkength: 数値。このフィールドを設定すると、入力の最大長を設定できます。
テキスト入力ボックス:
type 属性を text に設定すると、テキスト ボックスが生成されます。
<p> 姓名：<input type="text"></p>
パスワード入力ボックス:
type 属性がpasswordに設定されている場合、パスワード入力ボックスが生成されます。
<p>密码： <input type="password"> </p> <p>确认密码： <input type="password"> </p>
ラジオ ボタン:
type 属性を radio に設定して、ラジオ ボタンを生成します。
《单选按钮》<p>性别： <input type="radio" name="gender" value="radio"checked="true">男 <input type="radio" name="gender" value="radio">女 </p>
チェックボタン:
type 属性が checkbox に設定されている場合、チェック ボタンが生成されます。
《复选按钮》<p>专业： <input type="checkbox" name="interest">美术类 <input type="checkbox" name="interest">理科类 <input type="checkbox" name="interest">文科类 <input type="checkbox" name="interest">体育类 </p>
ボタン:
type 属性が submit に設定されている場合は「submit ボタン」となり、type 属性が reset に設定されている場合はリセット ボタンになります。
すごいです
上記の導入部分はすべて d5fd7aea971a85678ba271703566ebfd でマークされていますが、鍵は type 属性の値にあります。
複数行のテキスト ボックス:
訪問者がさらにテキストを入力する必要がある場合、通常は複数行のテキスト ボックスが使用され、4750256ae76b6b9d804861d8f69e79d3/ タグを使用して実装されます。
《提交按钮》<p> <input type="submit" value="注册提交"> <input type="reset" value="重置内容"> </p>
ドロップダウン リスト ボックス (ドロップダウン メニュー)
ドロップダウン リスト ボックスは 221f08282418e2996498697df914ce4e タグを使用して実装されます。
《多行文本框》 <p> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> </p>
この時点で、簡単なケースは完成です。読者の分析を容易にするために、上記のコードをすべて組み合わせてレンダリングを確認します。
単純なケース:
《下拉列表框》 <p>城市地址： <select name="select" size="4" id="select"> <option value="1">中国北部地区</option> <option value="2">中国南部地区</option> <option value="3">中国东部地区</option> <option value="4">中国西部地区</option> </select> </p>
レンダリング:
css 部分:
1, まず「単純なケース 2」を見てみましょう:
えー
1 の最初。本体部分は非常に単純で、単純なフォーム構造です。
2. フォーム全体のスタイルを設定し、フォームに境界線を追加し、内側と外側の余白を設定してから、14 ピクセルの Arial フォントを設定します。フォーム内で
3. 入力ボックス内のすべての単語に同じ色を追加します。d5fd7aea971a85678ba271703566ebfd タグに 1 ピクセルの差し込み枠を設定します。背景色に明るい空色
5. 「btn」カテゴリの タグの場合、フォントの色を「濃い青」に設定し、背景色を「明るい空色」に設定します。 1 ピクセルの濃い青色の外側の凸型境界線と内側の境界線。
6. ドロップダウン メニューの幅を設定し、内側のフォントを「濃い青」に設定し、背景色を「明るい空色」に設定します。 1 ピクセルの濃い青色の実線の境界線
7. 複数行のテキスト ボックスを設定します。幅と高さを設定し、内部のフォントを「濃い青」に設定し、背景色を「明るい空色」に設定します。濃い青の実線の枠線:
2. テキスト ボックスとその隣の画像ボタンを配置します
テキスト ボックスの隣のボタンは、頻繁に使用される Web ページのコンテンツです。検索ボックスなどとして使用できますが、その隣のボタンが画像を使用している場合、縦方向に整列させるのが難しく、vertical-align、padding、margin などを使用しても機能しません (特に IE では使用できません)。 Firefox では垂直方向に整列しても問題ありません)。
「简单案例3」：
效果图：
上图中完全不对称、解決策は非常に単純で、必要なのは図片の完全な位置であり、上記のコードの修正は次のようになります：
<!DOCTYPE html><head><title>表单</title><style><!--form{ /*设置整个表单样式*/ border: 2px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:0px; font:14px Arial;}input{ /* 所有input标记 */ color: #00008B; }input.txt{ /* 文本框单独设置 */ border: 1px inset #00008B; background-color: #ADD8E6;}input.btn{ /* 按钮单独设置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px;}select{ /*设置下拉列表框*/ width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}textarea{ /*设置多行文本框*/ width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B;}--></style> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select><br /></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女<br /></p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看书 <input type="checkbox" name="hobby" id="net" value="net" class="check">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉<br /></p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn"></p></form></body></html>レンダリング：IE ブラウザ 、この 2 つの間には少しギャップがあります。 この教材では主にフォームの作成とcssを使ってフォーム要素を設定する方法を紹介します。