ピックアップ記事

はじめてのhtml5 css3

はじめてのhtml5 css3

はじめてのhtml5 css3

おはようございます、 昨日寝るのが遅くオネムな感じなのですが、笑 しっかり「継続」できるように頑張ります。

前回 フロートについて書こうと思いましたが、恐ろしく初歩なのでやっぱりやめときます!笑 ということで、ちょっと難易度が高くなるフォームについて書いていきます。

PHPでデータをとったり、スパムは送信できなくしたり、そのあたりはおいておいて、、、、笑

フォーム関連の要素

HTML5では、フォームに関する新しい要素が追加されているだけでなく、 既存の要素に対しても新しい属性が大量に追加されています。 しかし、それらのブラウザのサポートはまちまちで、多くの機能に未対応のブラウザも存在します。 そのため新機能が利用されていないのが現状です。 フォーム全体を囲む要素 フォーム要素はその要素内に含んでいるフォーム関連要素で入力、選択したデータの送信先や送信方法を指定する要素です、 テキスト入力欄やメニューなどに送信するのであればフォーム要素内に入れる必要があります。

フォームの属性

  • action=”送信先url”

データの送信先のURLを指定します

  • method=”送信方法”

データの送信方法を指定します 「get 初期値」または「post」が指定できます getはURLの後ろにデータをつけくわえて送信する方法です。 postはURLとは別にデータを送信します

  • enctype=”MIMEタイプ”

method属性の値が「post」のときの、データを送信する際のMIMEタイプを指定します

  • name=”フォームの名前”

フォームを参照するための名前を指定します

入力欄やボタンを生成する要素

フォームで使用されるテキスト入力欄や各種ボタン類の多くはinput要素というたった一種類の空要素によって生成されます input要素をどのフォーム部品にするのかは、type属性で指定します フォーム部品の種類によって使用する属性とその機能は違ってきます ユーザーによって入力・選択された値はname属性で指定した名前とペアで送信されます input要素に指定できる属性

  • type=”フォームの部品と種類”

text 一行テキスト入力欄 password 一行パス入力欄 checkbox チェックボックス radio ラジオボタン file ファイル送信用部品 hidden 画面上には表示させず送信するテキスト reset リセット button 凡庸ボタン image 画像の送信ボタン

  • name=”部品の名前”

このフォームの部品の名前を入れます、入力、選択されたデータはこの名前とペアで送信されます 同じ選択項目内でチェックボックスまたはラジオボタンには同じ名前をつえる必要があります

  • velue=”初期値/ラベル/送信値”

テキスト入力の場合はそこに最初から入力されている初期値となりますボタンの場合はそのラベルになります ラジオまたは、チェックボックスの場合その項目を選択した時にサーバーに送信される値となります

  • size=”文字数”

テキストの文字数を指定します 初期値は20です

  • maxlength=”最大文字数”

テキスト入力できる最大の文字数になります

  • checked

チェックボックスまたはラジオボタンを選択した状態にします

続き

readonly このフォーム部分を変更不可

disabled このフォームの部品を変更・選択不可の状態にします

src=”画像のURL” width=”幅” height=”高さ” alt=”代替テキスト”

このあたりはお馴染みですね!!笑   それではデモってみます!!

 

<from action=”ほにゃらら.cgi※プログラムです” method=”post”>

<p>text:::<input type=”text” name=”type01″></p>

<p>password:::<input type=”password” name=”type02″</p>

<p>checkbox::: <input type=”checkbox” name=”type03″ value=”c1″ checked>項目1

checkedで初期からチェックがついています

<input type=”checkbox” name=”type03″ value=”c2″>項目2

<input type=”checkbox” name=”type03″ value=”c3″>項目3 </p>

<p>radio::: <input type=”radio” name=”type4″ value=”r1″ checked>項目1

<input type=”radio” name=”type4″ value=”r2″>項目2

<input type=”radio” name=”type4″ value=”r3″>項目3 </p>

<p>file::: <input type=”file” name=”type5″> </p>

<p>hidden::: <input type=”hidden” value=”h1″ name=”type6″> </p>

<p>submit:::<input type=”submit”></p>

<p>reset:::<input type=”reset”></p> </form>

こんな感じでデモりました、 初期値で、テキストを入れたり、チェックした状態でできます。

text:::

password:::

checkbox::: 項目1 checkedで初期からチェックがついています

項目2 項目3

radio::: 項目1 項目2 項目3

file::: 

hidden:::

submit:::

reset:::

どうですか?? これにCSSをつけてOKですね!!

でちなみに、面白いのもありました!!

<p><input type=”numbe”></p>

<p><input type=”date”></p>

<p><input type=”range”></p>

<p><input type=”color”></p>

 

色々あるみたいですね!!

demoは上からです。

 

すごくないですか? インプットといれるだけで、色々な値があるようです!!

次回は面白いボタンのつくり方や、 メニューのつくり方をしていきますね!!

今日から空手の練習が始まりますので、頑張ってやります!! それでは皆様~~~~ サランヘヨ!!!!

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    灸頭鍼

  2. ありす, 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    腰痛改善体操 その後

  3. ありす整骨院 求人

    ありす整骨院がやりたいこと

  4. 予防介護体操

  5. 高松市 整骨院

    利用者様といいね!!その④

  6. 整骨院.求人. 治療. 高松.事故通院. 高松.整骨院.高松市 ムチウチ, 高松市 整骨院

    体温上昇・免疫力アップ

  7. 高松市 整骨院, 高松市 ムチウチ,

    利用者様といいね!!その⑩

  8. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    利用者様といいね!!その㉘

  9. LINEスタンプ ありすちゅあん

    LINEスタンプ作成しました!!ちなみにありすちゃん!(笑)

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 高松市 猫背
  4. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

PV解析

  • 1020現在の記事:
  • 92693総閲覧数:
  • 45今日の閲覧数:
  • 70昨日の閲覧数:
  • 498先週の閲覧数:
  • 2450月別閲覧数:
  • 62583総訪問者数:
  • 44今日の訪問者数:
  • 65昨日の訪問者数:
  • 448先週の訪問者数:
  • 1342月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP