忍者ブログ

おやっさんのWEBサイト制作への道

WEBサイト制作ど素人のおやっさんが、HTML、CSS、PHPなど学んでいく技術ブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML/XHTML&CCS015(formタグ,inputタグ,textareaタグ,)

★タグ

formタグ

・・・入力・送信フォームを作るときに使うタグです。

●action属性

・・・formの送信先を指定します。ここで指定したURLに送信されます。
●method属性・・・formの送信方法です。getとpostがありますがデータ、セキュリティからみてpostがいいのでmethod="post"で行きましょう。

inputタグ

・・・formタグの中にテキストを入力したり、ボタン的なものを作ったりするときに使います。
<input type="~">
的な書き方をします。

○type属性の種類
■text・・・一行のテキスト(文字)ボックスを作成する。
<form>名前:<input type="text" name="項目名" value="初期値(変更可)" size="10" maxlength="10"/></form>

名前:

になります。
sizeは文字数?(※正確ではないらしです。)長さかな?
maxlengthは最大文字数を表しています。
■password・・・パスワード入力欄を作成する。たぶん半角英数字しか使えないです。
<form>パスワード:<input type="password" /></form>で
パスワード:

になります。

■image・・・イメージの送信ボタンを作成します。
<form><input type="image" src="画像までのパス" alt="画像の代わりになるテキストを指定" /></form>

になります。(時間がないのでキラキラ画像を送信ボタンにしてみました。)

■file・・・ファイル名入力ボックスを作成します。
<form><p><input type="file" name="datafile" /></p><p><input type="submit" value="送信" /></p></form>


になります。

■checkbox・・・チェックボックスボタンを作成します。複数のボタンを選択できます。
<form><input type="checkbox" name="color1" value="red"/>赤<input type="checkbox" name="color2" value="bule" />青</form>で

になります。複数個選択できます。
checkedでボタン指定できます。


■radio・・・ラジオボタンを作成します。一個のボタンしか選択できません。
<form><input type="radio" name="color1" value="red"/>赤<input type="radio" name="color1" value="bule" />青</form>で

になります。一つしか選択できません。したがって使うときは普通2個以上使います。

■subumit・・・送信ボタンを作成します。
<form><input type="submit" value="送信" /></form>で

になります。velue属性名がボタンに表示されます。


■reset・・・リセットボタンを作成します。
<form>名前:<input type="text" /><input type="reset" value="リセット" /></form>で
名前:

になります。value属性名がボタンに表示されます。

textareaタグ・・・複数行のテキストボックスの作成です。
<form><p>コメント<br /><textarea name="comment "rows="5" cols="30">らーめん食べたい</textarea></form>で

コメント


になります。rowsで何行、colsで一行の文字数を指定します。name名は送信先のメールで
[comment]
らーめん食べたい
みたいな感じで表示されます。

selectタグ・・・セレクトボックスを作成するタグです。初期値ではプルダウン式になっており、size属性で指定する事でプルダウン式じゃなくすることも可能です。selectタグの中にoptionタグを入れることで作れます。

<form><select name="color" multiple="multiple" ><option value="red">赤[red]<option value="green" selected="selected">緑[green]<option value="bule">青[bule]</select></form>で


になります。selectの開始タグにsize属性を入れればプルダウン式じゃなくせます。
selectedは選択された状態を指定します。selectedを緑に設定したので緑[green]が設定されます。
multiple属性は複数個選択できる用意する属性です。(Ctrlキーを押しながらクリックするとできます。)
赤を選んだ場合、
name=color,value="red"なので。送信したらメールには
[color]
red
と送信されてきます。

<input type="hidden" name="項目名" value="値(変更不可)" />
hiddenは隠し項目です。したがってブラウザには表示されません。
PHPと絡んでくると思われるので後でちゃんとやろうと思います。

formタグは1ページに複数個使えます。<form>~</form>ので一つのformです。

↓id名、class名に困ったときは・・・

有名サイトが使っているid名class名集めてきました!

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

カレンダー

04 2024/05 06
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

フリーエリア

にほんブログ村 IT技術ブログ HTML/CSSへ にほんブログ村 IT技術ブログ PHPへ

最新コメント

[11/23 テスト]

プロフィール

HN:
おやっさん
性別:
非公開

バーコード

ブログ内検索

P R

忍者ツールズプロフィール

忍者ツールズプロフィールは終了しました

カウンター