HTML便箋大全
1.1フォントスタイルの適用
フォントスタイルには、フォントファミリー科(font-family)、フォントスタイル(font-style)、フォント変形(font-variant)、フォント太字(font-weight)、フォントサイズ(font-size)、フォント(font)が含まれます.具体的な定義方法は、ここでは詳しく説明しませんが、その資料を参照してください.
ボタンの文字がきれいではないことに気づいたかもしれませんが、CSSフォントスタイルで解決することができます.同様に、テキストボックス、複数行テキストボックス、パスワードボックス、ドロップダウン選択ボックスなど、他のいくつかのテキストに関連するフォーム項目にフォントスタイルを適用することができます.
これらの応用を十分に示すために、以下の例は特にいくつかの様式を設計し、実際の応用では、このように乱れずに柔軟に運用する必要はありません.
HTMLコード
小結:フォントのスタイルを熟知すれば、柔軟に変化することができ、ラベルの中でstyleを使って定義する必要はありません.完全にで定義したり、外部でCSSファイルを引用したりすることができます.使うときに引用すれば、予想される効果を達成することができます.
1.2背景色と画像スタイルの応用
多くの場合、ページは色の組み合わせによってフォームの背景色と画像スタイルを設計せざるを得ず、背景色はbackground-color属性、背景画像はbackground-image属性を利用し、色と画像は同様に予想外の効果を得ることができる.
サンプル2:フォーム要素の背景表示
まとめ:background-colorプロパティとbackground-imageプロパティを使用すると、「色」フォームを設計できます.
1.3外枠スタイルの適用
フォームの枠線があまりにも堅苦しいと思うかもしれませんが、単一の線や他の枠線スタイルを設計できますか?もちろんいいですよ.
枠に関する属性は、枠スタイルborder-style、上枠border-top、右枠border-right、下枠border-bottom、左枠border-left、枠色border-colr、枠幅border-width、上枠幅border-top-width、右枠幅border-right-width、下枠幅border-bottom-width、左枠幅border-left-width、枠border-width、関連資料を参照してください.
サンプル3:8種類の枠線形式の展示
テキストボックスには、border-styleという8種類の枠線スタイルがあります.この例では、枠線幅の設定に法則があります.
border-width:[thin|medium|thick|<長さ>]{1,4}
枠線幅は、上、右、下、左の枠線幅にそれぞれ適用される要素の枠線幅を1～4つの値で設定します.値が1つしか与えられていない場合は、すべての枠線幅に適用されます.2つまたは3つの値が与えられた場合、省略された値は対辺と等しい
例:
プログラムコード
枠線の色の設定には、border-colr:<色>{1,4}の法則があります.
枠線の色は、1～4つの値で要素の枠線の色を設定します.4つの値が指定されている場合は、上、右、下、左の枠線色にそれぞれ適用されます.値が1つしか与えられていない場合は、すべての枠線色に適用されます.2つまたは3つの値が与えられている場合、省略された値は対辺と等しい.
複数行のテキストボックスおよびボタンについては、枠線を設定する方法はテキストボックスと同様に、説明しません.
ドロップダウン選択ボックスselectは枠線の設定をサポートしないため、その設定は無駄です.
ラジオボタンとチェックボタンの枠線は、設定の効果があまり調和していないので、設定しないことをお勧めします.そうしないと、「蛇に足を添える」という感じがします.
例4:枠線の特殊設計展示
賢い読者は、単一の枠線を設計すれば、きっともっときれいだと思います.次に、Solidとdottedの2つのタイプの枠線のみを使用して、他のタイプの枠線の原理が同じである枠線の設定効果を試してみましょう.
注記--枠線タイプの外観は次のとおりです.
none:枠線なし.指定したborder-width値とは無関係です.
dotted:点線;
dashed:破線;
solid:実線フレーム;
double:二重線の枠線.2つの単線とその間隔の和は、指定されたborder-width値に等しい.
groove:3 D溝;
ridge:枠の突起;
inset:3 D凹みエッジ;
outset:3 Dフランジ
2、画像魔法
画像は、Webページの重要な要素ですが、フォームに適用できますか?次に,ボタンの代わりに画像を用い,背景図を用いてフォーム要素を美化する2つの部分に分けて検討する.
2.1ボタンの代わりに画像を使う
デフォルトのフォームボタンが醜いため、ほとんどのWebサイトでは画像ボタンが採用されています.では、2つの例で実装方法を見てみましょう.
サンプル5:コミットボタンの代わりに画像を使用:
コミットボタンが1つしかない場合、イベント関数を追加する必要がなく、コードは次のように簡単に実現できます.
ラベルがinput type=「image」に変更された以外は、![]()
ラベルのプロパティと同じです.たとえば、次のようにします.
すべてのボタンの代わりに画像を使えばいいのではないでしょうか.はい、しかし、上記のように簡単ではありません.イベント関数を付けなければなりません.そうでなければ、画像はコミットボタンで、リセットなどの機能を完成できません.次の例を見てみましょう.
注意:
submitボタンの代わりに画像コードフォーマットは
resetボタンに代わるコードピクチャフォーマットは
注意:formNameはフォームのname属性値です.
2.2背景図によるフォーム要素の美化
実際には、background-image:url()プロパティを使用してフォーム要素の背景図を定義しましたが、ここでは一例を挙げると、selectが効果的ではない以外は、Webページの背景に合わせて設定できることがわかります.
例6:背景図の設定
フォントスタイルには、フォントファミリー科(font-family)、フォントスタイル(font-style)、フォント変形(font-variant)、フォント太字(font-weight)、フォントサイズ(font-size)、フォント(font)が含まれます.具体的な定義方法は、ここでは詳しく説明しませんが、その資料を参照してください.
ボタンの文字がきれいではないことに気づいたかもしれませんが、CSSフォントスタイルで解決することができます.同様に、テキストボックス、複数行テキストボックス、パスワードボックス、ドロップダウン選択ボックスなど、他のいくつかのテキストに関連するフォーム項目にフォントスタイルを適用することができます.
これらの応用を十分に示すために、以下の例は特にいくつかの様式を設計し、実際の応用では、このように乱れずに柔軟に運用する必要はありません.
HTMLコード
， 9pt， <br>
<input type="text" name="formExam" size="10" maxlength="10" style="font-family: ; font-size: 12px; font-weight: bold" value=" ">
<br> <br>
<input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8">
<br> ， Verdana， 9pt<br>
<select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
<option value="2" selected>yesky.com</option>
<option value="1">redidea.net</option>
</select>
<br> Verdana， ， 9pt<br>
<br> 1 2 ， 1 9pt ， <br>
<input type="submit" name="Submit" value=" 1" style="font-family: ; font-size: 9pt;"> <input type="submit" name="Submit" value=" 1" ><br>
<TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right>underline css style小結:フォントのスタイルを熟知すれば、柔軟に変化することができ、ラベルの中でstyleを使って定義する必要はありません.完全にで定義したり、外部でCSSファイルを引用したりすることができます.使うときに引用すれば、予想される効果を達成することができます.
1.2背景色と画像スタイルの応用
多くの場合、ページは色の組み合わせによってフォームの背景色と画像スタイルを設計せざるを得ず、背景色はbackground-color属性、背景画像はbackground-image属性を利用し、色と画像は同様に予想外の効果を得ることができる.
サンプル2:フォーム要素の背景表示
HTML
， <br>
<input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000">
<br> <br>
<input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999">
<br> <br>
<input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000">
<input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000">
<br> <br>
<select name="select2" size="1">
<option selected style="background-color: #FF0000">yesky.com</option>
<option style="background-color: #0000CC">redidea.com</option>
<option style="background-color: #009900">chinabyte.com</option>
<option style="background-color: #ff33cc">sina.com</option>
<option style="background-color: #999999">sohu.com</option>
</select>
<br>
<br>submit1 <br>
<input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900">
<br>submit2 <br>
<input type="submit" name="Submit22" value="Submit2" style="background-image: url(attachments/month_200502/21_171412_2yq5bg.gif)"><br>
<TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(attachments/month_200502/21_171412_2yq5bg.gif)">まとめ:background-colorプロパティとbackground-imageプロパティを使用すると、「色」フォームを設計できます.
1.3外枠スタイルの適用
フォームの枠線があまりにも堅苦しいと思うかもしれませんが、単一の線や他の枠線スタイルを設計できますか?もちろんいいですよ.
枠に関する属性は、枠スタイルborder-style、上枠border-top、右枠border-right、下枠border-bottom、左枠border-left、枠色border-colr、枠幅border-width、上枠幅border-top-width、右枠幅border-right-width、下枠幅border-bottom-width、左枠幅border-left-width、枠border-width、関連資料を参照してください.
サンプル3:8種類の枠線形式の展示
HTML
<INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" size=10 value=dotted name=RedF>
<INPUT style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 1px dashed; BORDER-LEFT: 3px dashed; BORDER-BOTTOM: 1px dashed" size=10 value=dashed name=RedF2>
<INPUT style="BORDER-RIGHT: 3px double; BORDER-TOP: 3px double; BORDER-LEFT: 3px double; BORDER-BOTTOM: 3px double" size=10 value=double name=RedF3>
<INPUT style="BORDER-RIGHT: 2px groove; BORDER-TOP: 2px groove; BORDER-LEFT: 2px groove; BORDER-BOTTOM: 2px groove" size=10 value=groove name=RedF4> <BR>
<INPUT style="BORDER-RIGHT: 3px inset; BORDER-TOP: 3px inset; BORDER-LEFT: 3px inset; BORDER-BOTTOM: 3px inset" size=10 value=inset name=RedF5>
<INPUT style="BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BORDER-LEFT: 2px outset; BORDER-BOTTOM: 2px outset" size=10 value=outset name=RedF6>
<INPUT style="BORDER-RIGHT: 3px ridge; BORDER-TOP: 3px ridge; BORDER-LEFT: 3px ridge; BORDER-BOTTOM: 3px ridge" size=10 value=ridge name=RedF7>
<INPUT style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" size=10 value=solid name=RedF8> <BR>
<INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" type=checkbox value=checkbox name=checkbox2>
<INPUT style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" type=radio value=radiobutton name=radiobutton>
<INPUT style="BORDER-RIGHT: 3px double; BORDER-TOP: 3px double; BORDER-LEFT: 3px double; BORDER-BOTTOM: 3px double" type=submit value= name=Submit4>
<INPUT style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 1px dashed; BORDER-LEFT: 3px dashed; BORDER-BOTTOM: 1px dashed" type=submit value= name=Submit23> <BR>
<TEXTAREA style="BORDER-RIGHT: #006600 1px dotted; BORDER-TOP: #006600 1px dotted; BORDER-LEFT: #006600 1px dotted; BORDER-BOTTOM: #006600 1px dotted" name=RedF9 rows=3 wrap=VIRTUAL cols=30>テキストボックスには、border-styleという8種類の枠線スタイルがあります.この例では、枠線幅の設定に法則があります.
border-width:[thin|medium|thick|<長さ>]{1,4}
枠線幅は、上、右、下、左の枠線幅にそれぞれ適用される要素の枠線幅を1～4つの値で設定します.値が1つしか与えられていない場合は、すべての枠線幅に適用されます.2つまたは3つの値が与えられた場合、省略された値は対辺と等しい
例:
プログラムコード
枠線の色の設定には、border-colr:<色>{1,4}の法則があります.
枠線の色は、1～4つの値で要素の枠線の色を設定します.4つの値が指定されている場合は、上、右、下、左の枠線色にそれぞれ適用されます.値が1つしか与えられていない場合は、すべての枠線色に適用されます.2つまたは3つの値が与えられている場合、省略された値は対辺と等しい.
複数行のテキストボックスおよびボタンについては、枠線を設定する方法はテキストボックスと同様に、説明しません.
ドロップダウン選択ボックスselectは枠線の設定をサポートしないため、その設定は無駄です.
ラジオボタンとチェックボタンの枠線は、設定の効果があまり調和していないので、設定しないことをお勧めします.そうしないと、「蛇に足を添える」という感じがします.
例4:枠線の特殊設計展示
賢い読者は、単一の枠線を設計すれば、きっともっときれいだと思います.次に、Solidとdottedの2つのタイプの枠線のみを使用して、他のタイプの枠線の原理が同じである枠線の設定効果を試してみましょう.
HTML
<INPUT style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value= ： name=myRed>
<INPUT style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" type=button value= 1 name=Button>
<br><br>
<INPUT style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value= ： name=myRed2>
<INPUT style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value= 2 name=Submit24>
<br><br>
<INPUT style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value= ： 、 name=myRed3>
<INPUT style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value= 3 name=Submit32>注記--枠線タイプの外観は次のとおりです.
none:枠線なし.指定したborder-width値とは無関係です.
dotted:点線;
dashed:破線;
solid:実線フレーム;
double:二重線の枠線.2つの単線とその間隔の和は、指定されたborder-width値に等しい.
groove:3 D溝;
ridge:枠の突起;
inset:3 D凹みエッジ;
outset:3 Dフランジ
2、画像魔法
画像は、Webページの重要な要素ですが、フォームに適用できますか?次に,ボタンの代わりに画像を用い,背景図を用いてフォーム要素を美化する2つの部分に分けて検討する.
2.1ボタンの代わりに画像を使う
デフォルトのフォームボタンが醜いため、ほとんどのWebサイトでは画像ボタンが採用されています.では、2つの例で実装方法を見てみましょう.
サンプル5:コミットボタンの代わりに画像を使用:
コミットボタンが1つしかない場合、イベント関数を追加する必要がなく、コードは次のように簡単に実現できます.
ラベルがinput type=「image」に変更された以外は、
HTML
<INPUT type=image height=19 width=53 src="attachments/month_200502/21_171406_pmeslogin.gif" align=absMiddle border=0 name=imageField>すべてのボタンの代わりに画像を使えばいいのではないでしょうか.はい、しかし、上記のように簡単ではありません.イベント関数を付けなければなりません.そうでなければ、画像はコミットボタンで、リセットなどの機能を完成できません.次の例を見てみましょう.
HTML
<INPUT onclick=this.form.submit() type=image height=19 width=53 src="attachments/month_200502/21_171406_pmeslogin.gif" align=absMiddle border=0 name=RedImg> <INPUT onclick=this.form.reset() type=image height=19 width=53 src="attachments/month_200502/21_171416_1xp4reset.gif" align=absMiddle border=0 name=RedImg3>注意:
submitボタンの代わりに画像コードフォーマットは
resetボタンに代わるコードピクチャフォーマットは
注意:formNameはフォームのname属性値です.
2.2背景図によるフォーム要素の美化
実際には、background-image:url()プロパティを使用してフォーム要素の背景図を定義しましたが、ここでは一例を挙げると、selectが効果的ではない以外は、Webページの背景に合わせて設定できることがわかります.
例6:背景図の設定
HTML
<INPUT style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" name=RedBack>
<INPUT style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" type=checkbox value=checkbox name=checkbox3>
<INPUT style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" type=radio value=radiobutton name=radiobutton>
<select style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" size=1 name=select3>
<OPTION selected>www.yesky.com</OPTION>
<OPTION>redidea.com</OPTION>
<OPTION>www.chinabyte.com</OPTION></select>
<BR>
<INPUT style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" type=submit value=Submit name=Submit5>
<INPUT style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" type=reset value=Reset name=Submit25>
<BR>
<TEXTAREA style="BACKGROUND-IMAGE: url(attachments/month_200502/21_171412_2yq5bg.gif)" name=RedBacka rows=3 wrap=VIRTUAL>