HTMLで「セレクトボックス」を作って遊ぶ。(ショッピングサイトなどで、選ぶようなやつです)

セレクトボックスを作ってみた

「セレクトボックス」って見たことありますか?

商品を選んだりするこんなやつです。


↑ ・・スミマセン、商品内容の項目はちょっとふざけました。特に一番最後笑

ショッピングサイトで商品を選んだり、条件を選んだりする箱みたいなやつです。WordPressや、AtomエディターとGoogleChromeをダウンロードすればできるので、作って遊んでみました。

上に紹介した「セレクトボックス」は、こんなコードで書いています。

<label for=“product”>いい感じの商品</label>
<select id=“product”>
<option>ほんとにほんとにいい感じの商品</option>
<option>かなりいい感じの商品</option>
<option>そこそこいい感じの商品</option>
<option>ま、ある程度いい感じの商品</option>
<option>地獄のような商品</option>
</select>

本記事では、セレクトボックスの作成手順を紹介します。

✔️本記事の内容

  • セレクトボックスを作る手順&ちょっとした応用
  • おまけ:パスワード入力欄「入力した文字が表示されなくなる」

ちなみに、WordPressは、コードエディターで遊べます。

コードエディターを使う
Atomエディターでは、Plain Textを「html」に設定してコードを作成後、保存してから、Google Chromeにドラッグ&ドロップ

ドットインストールのHTML基礎文法入門を参考にされるといいです。(参考:AtomエディターはPCに導入する必要があります。【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタン

Atomエディターを使うにはHTMLへ

セレクトボックスをさらに応用させると、こんなのも ↓ できます。


 歳

これは、ドットインストール#23で学んだ内容です。よかったらドットインストールを見てみてください。

セレクトボックスを作る手順&ちょっとした応用

セレクトボックスを作る手順を解説

作る手順を紹介します。

  • セレクトボックスを作る手順①:labelタグでfor属性を作る
  • セレクトボックスを作る手順②:selectタグでidを作る
  • セレクトボックスを作る手順③:中身の商品一つ一つをoptionタグで囲む

カンタンです。

セレクトボックスを作る手順①:labelタグでfor属性を作る

<label for="product">いい感じの商品</label>

コンテンツ(「いい感じの商品」の部分。ここはお好みで変えられますよ)をlabelタグで挟み、for属性で”product”とします。

セレクトボックスを作る手順②:selectタグでidを作る

<select id="product"></label>

中身の商品全てを ↑ のlabelタグで囲むことになります。idは上の”product”と同じ。

セレクトボックスを作る手順③:中身の商品一つ一つをoptionタグで囲む

<option>ほんとにほんとにいい感じの商品</option>
<option>かなりいい感じの商品</option>
<option>そこそこいい感じの商品</option>
<option>ま、ある程度いい感じの商品</option>
<option>地獄のような商品</option>

この中身の商品もお好みで変えられます。以上です。

コードをまとめると、冒頭でも書きましたが、こんな感じ。

<label for=“product”>いい感じの商品</label>
<select id=“product”>
<option>ほんとにほんとにいい感じの商品</option>
<option>かなりいい感じの商品</option>
<option>そこそこいい感じの商品</option>
<option>ま、ある程度いい感じの商品</option>
<option>地獄のような商品</option>
</select>

ちょっとした応用:最初から「地獄のような商品」を選んでおきたい場合

selectedを使います。optionの後ろに半角スペースで、そのあとにselected

<option selected>地獄のような商品</product>

これで、最初っから「地獄のような商品」を指定しておくことができます(自分で書いてて今さら思いましたが、地獄のような商品ってふざけてますね笑スミマセン・・)。


おまけ:パスワード入力欄「入力した文字が表示されなくなる」

パスワードは表示されない


↑ 何か入力してみてください。文字が表示されなくなります(表示するだけなので、入力したパスワードで何か動くということはありません)。

コードはこれ。

<label for="pwd">パスワードだよん</label><input type="password" id="pwd">

labelタグとinputタグを使ってforとidで結びつけます。

以上となります。

ちなみに、冒頭で紹介した応用 ↓


 歳

↑これについては、このサイト【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)からコードを引用しています。よかったら見てみてください。
では!