How to make a website

投稿フォームを作ってみよう!

一部例として企業などでも使える投稿フォームをjQueryで実装してみましょう!

HTMLやCSSでも作れますが、jQueryを使ってより本格的なものを作ってみましょう!

名前入力画面

投稿フォームにもよくある名前の入力欄を作ってみよう!

名前入力欄を作るのはHTML要素で記述します! 入力欄に灰色の文字で「入力してください」という文字が見えます。この効果をscript要素で記述しています! 少し手を加えるだけで、より本格的な入力欄になります(^^)

Preview

 お名前:

script

申し込み者の入力画面

投稿フォームにもよくある申し込み者の入力欄を作ってみよう!

申し込み者を変更すると,名前を打つ欄が申し込み者に対応して変更します。
この効果をscript要素で記述しています!変更されると記入する内容も分かりやすくなります(^^)

Preview

申し込み者:

お名前:

script

送信エラーを感知する

必須項目を入力してないとエラーがでるフォーム機能を見てみよう!

必須項目はちゃんと記入されていないともし必要な情報だった場合、記入漏れがされていたら大変です。
なのでjQueryの効果で、必須項目が入力されていないと送信できないように設定できます(^^)

script

チェックが入っている項目部分を選択する

投稿フォームにもよくあるチェックボタンにjQuery要素を足してみよう!

ラジオボタンでチェックされている部分は、チェックされているだけだと少し見えずいです。 なので、ラジオボタンでチェックされている部分のテキストの色を変えることによし、 自分がどの項目を選択しているのかが見てすぐ判断できるようにするだけで、チェック漏れや選択ミスを防ぐ ことができます(^^)

Preview

script