(10) CSSを使用してform_html/css_WEB-ITnoseを作成します-htmlチュートリアル-php.cn

(10) CSSを使用してform_html/css_WEB-ITnoseを作成します

WBOY

リリース： 2016-06-24 11:15:18

オリジナル

1234 人が閲覧しました

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 に設定されている場合はリセットボタンになります。

すごいです

上記の導入部分はすべてでマークされていますが、鍵は type 属性の値にあります。

複数行のテキストボックス:

訪問者がさらにテキストを入力する必要がある場合、通常は複数行のテキストボックスが使用され、/ タグを使用して実装されます。 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">《提交按钮》<p> <input type="submit" value="注册提交"> <input type="reset" value="重置内容"> </p></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p> ドロップダウンリストボックス (ドロップダウンメニュー) </p> <p> ドロップダウンリストボックスは <select> タグを使用して実装されます。 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">《多行文本框》 <p> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> </p></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>この時点で、簡単なケースは完成です。読者の分析を容易にするために、上記のコードをすべて組み合わせてレンダリングを確認します。 </p> <p>単純なケース: </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">《下拉列表框》 <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></pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>レンダリング: </p> <p></p> <p> </p> <p><strong>css 部分: </strong></p> <p><strong>1, </strong>まず「単純なケース 2」を見てみましょう: </p> <p class="sycode"> えー </p> <p>1 の最初。本体部分は非常に単純で、単純なフォーム構造です。 </p> <p>2. フォーム全体のスタイルを設定し、フォームに境界線を追加し、内側と外側の余白を設定してから、14 ピクセルの Arial フォントを設定します。フォーム内で </p> <p>3. 入力ボックス内のすべての単語に同じ色を追加します。<input> タグに 1 ピクセルの差し込み枠を設定します。背景色に明るい空色 </p> <p>5. 「btn」カテゴリの <input> タグの場合、フォントの色を「濃い青」に設定し、背景色を「明るい空色」に設定します。 1 ピクセルの濃い青色の外側の凸型境界線と内側の境界線。 </p> <p>6. ドロップダウンメニューの幅を設定し、内側のフォントを「濃い青」に設定し、背景色を「明るい空色」に設定します。 1 ピクセルの濃い青色の実線の境界線 </p> <p>7. 複数行のテキストボックスを設定します。幅と高さを設定し、内部のフォントを「濃い青」に設定し、背景色を「明るい空色」に設定します。濃い青の実線の枠線: </p><p> </p><p> <strong> </strong> </p><p> 2. テキストボックスとその隣の画像ボタンを配置します </p><p> </p> テキストボックスの隣のボタンは、頻繁に使用される Web ページのコンテンツです。検索ボックスなどとして使用できますが、その隣のボタンが画像を使用している場合、縦方向に整列させるのが難しく、vertical-align、padding、margin などを使用しても機能しません (特に IE では使用できません)。 Firefox では垂直方向に整列しても問題ありません)。 <p> <strong>「简单案例3」：</strong> </p><p> </p> <p> <strong> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>恋爱交友网</title> </head> <body> <form method="post"> <p> 姓名：<input type="text"></p> <p>密码： <input type="password"> </p> <p>确认密码： <input type="password"> </p> <p>性别： <input type="radio" name="gender" value="radio"checked="true">男 <input type="radio" name="gender" value="radio">女 </p> <p>专业： <input type="checkbox" name="interest">美术类 <input type="checkbox" name="interest">理科类 <input type="checkbox" name="interest">文科类 <input type="checkbox" name="interest">体育类 </p> <p>城市地址： <select name="select"id="select"> <option value="1">中国北部地区</option> <option value="2">中国南部地区</option> <option value="3">中国东部地区</option> <option value="4">中国西部地区</option> </select> </p> <p>特长： <textarea name="textarea" id="textarea" cols="45" rows="5">

ログイン後にコピー

上图中完全不对称、解決策は非常に単純で、必要なのは図片の完全な位置であり、上記のコードの修正は次のようになります：

<!DOCTYPE html><head><title>表单</title><style></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>