HTMLの基礎 Last Update : 2013/09/05 09:08:38

 Webページ作成の為のHTMLを解説しています。

はじめに
■機能索引
HTMLとは
タイトルや背景
文字
レイアウト
リンク
画像
表(テーブル)
フォーム
フレーム
拡張子
カラーチャート
CSS辞典
相対・絶対パス
特殊文字
■主なタグ索引
meta
body
p
br
hr
h
font
b
i
sup
sub
acronym
marquee
div
pre
ul
ol
blockquote
q
dl
img
a
table
frameset
iframe
form
input
textarea
select
button
リンクしてね☆
HTMLの基礎-タグを覚えてウェブページを作ろう!
バナーはダウンロードしてお使い下さい。
フォーム
■フォームの作成

ここではフォームの作成方法を説明しています。 フォームとは、文章を入力する欄や項目を選択したりする際に使うチェックボックスの事です。
このページに掲載しているタグは以下の通りです。

■フォームの作成 <form>


使用例
<form>入力欄・ラジオボックス・ボタンなど・・</form>

<form></form>で、入力欄やチェックボックス・ラジオボタンなど のフォームを作成する事が出来ます。





■入力欄・ラジオボタン・チェックボックスの作成 <input~>


●入力欄を作成する●

使用例
<input type="値" size="値" value="値" maxlength="値" name="値">

属性 属性の値 解説
type text
password
入力タイプがテキスト
入力タイプがパスワード
size 数字 入力欄の幅
value 文字列 入力欄の初期値
maxlength 数字 入力可能な文字数
name 任意の文字列 変数名

type属性でpasswordを指定した場合、
入力した文字が*などに置き換えて表示されます。


  ●ラジオボタン・チェックボックスを作成する●

使用例
<input type="値" value="値" name="値" checked>後に続く文字列

属性 属性の値 解説
type radio
checkbox
ラジオボタン
チェックボックス
value name属性で指定した
変数に入力する値
変数に入力する値
name 選択項目のグループに
割り当てる変数名
文字列
checked 選択 項目があらかじめ
選択された状態になる

ラジオボタンはグループから1つの項目を選択するボタン。
チェックボックスはグループから複数の項目を選択するボックス。

選択項目のグループに割り当てるname属性では、
変数名を同じものにしておく必要があります。

checked属性を指定された項目は、はじめから選択された状態で表示されます。



  ●リセットボタンを作成する●

使用例
<input type="reset" value="ボタン名">

<input></input>のtype属性にresetを設定すると、 リセットボタンを作成することが出来ます。
リセットボタンでそのページに入力したデータを消去する事ができます。

value属性でボタン名を指定すると、リセットボタンに名前を付ける事ができます。
指定しない場合は「reset」「リセット」などのボタン名が自動的に表示されます。



  ●送信ボタンを作成する●

使用例
<input type="submit" value="ボタン名">

<input></input>のtype属性にsubmitを設定すると、
送信ボタンを作成することが出来ます。
送信ボタンでそのページに入力したデータを送信する事ができます。
ただし、あらかじめ<form~>のaction属性やmethod属性で 送信方法などを設定しておかなければなりません。

value属性でボタン名を指定すると、送信ボタンに名前を付ける事ができます。
指定しない場合は「submit」「クエリー送信」などのボタン名が自動的に表示されます。






■複数行の入力欄 <textarea>


使用例
<textarea name="値" rows="値" cols="値"> 文字列</textarea>

属性 属性の値 解説
name 変数名 文字列
rows 行数 入力フォームの行数
cols 桁数 入力フォームの桁数

<textarea></textarea>で入力フォームを作成することが出来ます。

フォームの行数はrows属性で、桁数はcols属性で、設定します。 そのとき入力する数字は半角で指定して下さい。
<textarea></textarea>の間に記入された文字列は、フォーム に初期値として表示されます。別に記入しなくても良いです。





■選択メニューの作成  <select~>


使用例
<select name="値">
<option value="値" selected>選択肢
</select>

属性 属性の値 解説
name 変数名 文字列
value 変数の値 変数に入力される値
selected 初期値 最初に表示される値

<select></select>で、プルダウン式選択メニューを作成することができます。

プルダウンして表示される項目は、<option>で指定します。
<option>に、selected属性を指定すると、その指定された<option>の 値が初期値として表示されます。指定しない場合は、一番最初に記述した<option> の値が初期値となります。





■選択メニューのグループ化  <optgroup>


使用例
<optgroup label="値">
<option label="値">項目名</option>
</optgroup>

属性 属性の値 解説
label(optgroup) グループ名 選択する項目の
グループの名前
label(option) 項目名 グループ内の
選択項目名

<optgroup></optgroup>、<option></option> を利用すると、選択項目をグループ化して表示することができます。

グループ化した項目の表示は使用しているブラウザによって、スタイルが違います。





■入力項目のグループ化  <fieldset>


使用例
<fieldset>
<legend>グループ化した入力項目の名前</legend>
</fieldset>

<fieldset></fieldset>を利用すると、 入力フォームや、ボタンなどのいくつかの項目をグループ化することができ、 <legend></legend>を利用すると、グループ化したフォームなどに 名前を付けることができます。





■ボタンの作成 <button>


使用例
<button type="値">ボタン名</button>

属性 属性の値 解説
type submit
reset
button
送信
リセット
ボタン

type属性の値である"button"は、Javascriptなどを使用するボタンを作成する際に使用します。

この、<button></button>は、間に設定したボタン名の書式を設定したり、画像 入りのボタンを作成する際に使用します。
画像を入れる時は、<button></button>の間に 画像表示のタグを配置してください。





■入力内容を電子メールで送信する  <form~>


使用例
<form action="mailto:電子メールアドレス" method="値"> enctype="text/plain">
フォームの内容
</form>

属性 属性の値 解説
method post
get
mailtoを利用するので
postを利用

<form></form>のaction属性で、mailto:の後に宛先である電子メールアドレスを 指定して下さい。





メール

質問メールがとても多くなった為、現在返信が遅れております。 お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。 申し訳ございませんが、その事をご理解いただいた上でご送信下さい。 また、ここではHTMLの質問に関してのみ受け付けております。


サイト検索
制作便利アイテム

カラーチャート
Color fan

色相・明度・彩度順カラーチャート。CMYK、RGB、慣用色名、配色事典付き。DTP、Web(HTML)で使えます。収録色の全てに、CMYK値、RGB値、そしてHTML用16進数を併記。
WEB関連リンク

Copyright © 2003 - ykr414. All Rights Reserved.