BLOG

こんにちは、Zenです。

フィリピンのセブ島にあるIT留学、英語留学のグローバルITアカデミーでのインターン研修をしております。

今回はHTMLタグを使ってコンタクトフォームを作る方法をご紹介していきたいと思います。

htmlを使って入力してみました。

 

 

 

 

 

 

 

 

 

 

 

 

 

<strong></strong>は文字を太字にしたい時に使います。

&ensp;は半角スペースより少し広めの余白

&emsp;は半角スペースよりさらに広めの余白

ちなみに&nbsp;は半角スペース、&thinsp;は&nbsp;より狭めのスペースです。

<br>は改行

<input type=”text” placeholder=”山田“>のinput type=”text”でテキスト入力スペースを、

placeholder=”山田“では入力スペース欄に仮で表示させておくテキストを入力します。

この場合では山田という名前が仮で入っています。

また、テキスト入力スペースの幅を指定したい場合、メールアドレス入力欄にあるようにsize=”39″などのように入力します。

<input type=”date” name=”date”>で、日付の入力欄を作成できます。

<input type=”radio” name=”件名” value=”お問い合わせ“>お問い合わせ　の、input type=”radio”でラジオボタンを作成できます。

name=”件名“はカテゴリー分けに必要です。ラジオボタンの場合同じカテゴリー内の選択肢の内、一つだけが選べます。

value=”お問い合わせ“のvalue属性でラジオボタンに名前を与え、>の外の「お問い合わせ」は実際に作成したページ上に表示される言葉になります。

選択肢１つごとに上記のセットを追加していきます。

radioをcheckboxに変えるとチェックボックスが作れ、複数選択ができます。

<textarea></textarea>は複数行の入力フィールドを挿入するタグです。

textareaの高さはrowsで、幅はcolsで指定します

 

そして実際にできたコンタクトフォームがこちら↓

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

生年月日の日付入力欄にカーソルを合わせてクリックすると、カレンダーが表示され日付が選択できるようになります。

左上の下向き三角▼をクリックすると、年度が変更できます。

 

 

 

 

 

 

 

とりあえずここまではできました。

本当は「メール送信」ボタンを配置して、そのボタンがクリックされた場合のメールの送信設定もhtmlを使ってしたいところですが、メール送信CGIをまず申し込まないといけないようですので、今回は割愛させていただきます。また、機会がありましたらアップしたいと思います。

Zenでした。