フロントエンド

【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)

【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)

こんにちは、ディレクターのせりなです。

HTMLで問い合わせフォームなんかを作るとき用に
セレクトメニューの中身をサクッとコピペできる、とーーーっても便利な一覧を作りました!
私は平和主義なので、ひとり占めしないでみなさんにも共有します。

よくある生年月日や都道府県、困りがちな業種選択まで
10種類ほど揃えてみたのでどうぞご活用ください。

目次
1. 西暦 (1900-2030年)
2. 月 (1-12月)
3. 日 (1-31日)
[ 番外編 ] 日付選択・カレンダー
4. 年齢
5. 数字 (1-99)
6. 都道府県
7. 職業
8. 業種 (簡易版)
9. 業種 (詳細版)
10. 担当業務
関連リンク

※ 各コードは、余白部分でダブルクリックすると全選択できます!


1. 西暦 (1900-2030年)

 年

<select name="year">
<option value="">-</option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select> 年

※ 余白部分でダブルクリックすると、ソースを全選択できます!


2. 月 (1-12月)

 月

<select name="month">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月

※ 余白部分でダブルクリックすると、ソースを全選択できます!


3. 日 (1-31日)

 日

<select name="day">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> 日

※ 余白部分でダブルクリックすると、ソースを全選択できます!


[ 番外編 ] 日付選択・カレンダー

selectじゃないですが、こんな便利な機能もあるよー!というご紹介。
使っているブラウザにもよりますが、カレンダーのUIで日付選択ができるものもあります。

日付選択・カレンダー

ブラウザによってはカレンダーのUIが対応していないものもあるので注意してください
 [ 対応ブラウザ ]  Chrome (カレンダー)、Opera (カレンダー)、Microsoft Edge (ドラムロール)
 [ 非対応ブラウザ ] Safari、IE、FireFox

例えばChromeの場合、inputボックスをマウスオーバーして右側の下向き矢印[▼]を押すと
カレンダーから日付を選択できるようになります。もちろんキーボード入力もできます。

<input type="date" name="calendar" max="9999-12-31">

※ 余白部分でダブルクリックすると、ソースを全選択できます!


4. 年齢

<select name="age">
<option value="">選択してください</option>
<option value="20歳未満">20歳未満</option>
<option value="20-29歳">20-29歳</option>
<option value="30-39歳">30-39歳</option>
<option value="40-49歳">40-49歳</option>
<option value="50-59歳">50-59歳</option>
<option value="60-69歳">60-69歳</option>
<option value="70-79歳">70-79歳</option>
<option value="80歳以上">80歳以上</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


5. 数字 (1-99)

年齢、商品の個数など・・・きっと何かに使えることでしょう!

 歳

<select name="num">
<option value="">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
</select> 歳

※ 余白部分でダブルクリックすると、ソースを全選択できます!


6. 都道府県

任意の[ option ]に[ selected ]をつけることで初期値の設定もできます。
今回は[ 東京都 ]を初期値にしてみました。必要なければ外してください。

<select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都" selected>東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


7. 職業

よくアンケートにある職業選択です。自由業ってなんだろう(笑)

<select name="job">
<option value="">選択してください</option>
<option value="公務員">公務員</option>
<option value="経営者・役員">経営者・役員</option>
<option value="会社員">会社員</option>
<option value="自営業">自営業</option>
<option value="自由業">自由業</option>
<option value="専業主婦">専業主婦</option>
<option value="パート・アルバイト">パート・アルバイト</option>
<option value="学生">学生</option>
<option value="その他">その他</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


8. 業種 (簡易版)

<select name="industry">
<option value="">選択してください</option>
<option value="製造業">製造業</option>
<option value="建築業">建築業</option>
<option value="設備業">設備業</option>
<option value="運輸業">運輸業</option>
<option value="流通業">流通業</option>
<option value="農林水産業">農林水産業</option>
<option value="印刷・出版業">印刷・出版業</option>
<option value="金融業・保険業">金融業・保険業</option>
<option value="不動産業">不動産業</option>
<option value="IT・情報通信業">IT・情報通信業</option>
<option value="サービス業">サービス業</option>
<option value="教育・研究機関">教育・研究機関</option>
<option value="病院・医療機関">病院・医療機関</option>
<option value="官公庁・自治体">官公庁・自治体</option>
<option value="法人団体">法人団体</option>
<option value="その他の業種">その他の業種</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


9. 業種 (詳細版)

業種によって大きくカテゴリ分けしてあるので、上の簡易版よりもより詳細な項目の選択が可能です。
必要に応じてアレンジを加えてみてください。

<select name="industry_more">
<option value="">選択してください</option>
<optgroup label="製造業">
	<option value="電機・電子・機械">電機・電子・機械</option>
	<option value="建築・設備・工事業">建築・設備・工事業</option>
	<option value="化学・製薬">化学・製薬</option>
	<option value="繊維・素材">繊維・素材</option>
	<option value="印刷・出版業">建印刷・出版業</option>
	<option value="農林水産業">農林水産業</option>
	<option value="食品">食品</option>
	<option value="その他の製造業">その他の製造業</option>
</optgroup>
<optgroup label="物流・通信業">
	<option value="IT・情報通信業">IT・情報通信業</option>
	<option value="電気・ガス・水道業">水道業</option>
	<option value="運輸・物流">運輸・物流</option>
	<option value="卸売・小売">卸売・小売</option>
	<option value="その他の物流・通信業">その他の物流・通信業</option>
</optgroup>
<optgroup label="金融・保険・不動産業">
	<option value="銀行・信託・金融業">銀行・信託・金融業</option>
	<option value="投資業">投資業</option>
	<option value="証券・商品取引">証券・商品取引</option>
	<option value="不動産取引業">不動産取引業</option>
	<option value="不動産賃貸業">不動産賃貸業</option>
	<option value="その他の金融・保険・不動産業">その他の金融・保険・不動産業</option>
</optgroup>
<optgroup label="サービス業">
	<option value="ホテル・旅館">ホテル・旅館</option>
	<option value="飲食">飲食</option>
	<option value="娯楽">娯楽</option>
	<option value="美容・理容業">美容・理容業</option>
	<option value="病院・医療・ヘルスケア">病院・医療・ヘルスケア</option>
	<option value="教育・研究・学会">教育・研究・学会</option>
	<option value="その他のサービス業">その他のサービス業</option>
</optgroup>
<optgroup label="各種団体">
	<option value="官公庁・政府機関・公益法人">官公庁・政府機関・公益法人</option>
	<option value="法人団体">法人団体</option>
	<option value="自治体">自治体</option>
	<option value="その他の団体">その他の団体</option>
</optgroup>
<option value="その他の業種">その他の業種</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


10. 担当業務

あまり使う機会はないかもしれませんが、会社でのポジション的なやつです。

<select name="position">
<option value="">選択してください</option>
<option value="経営">経営</option>
<option value="財務・会計・経理">財務・会計・経理</option>
<option value="人事・総務・庶務">人事・総務・庶務</option>
<option value="資材・購買・調達">資材・購買・調達</option>
<option value="営業・販売">営業・販売</option>
<option value="マーケティング・調査">マーケティング・調査</option>
<option value="広報・宣伝">広報・宣伝</option>
<option value="物流・生産管理">物流・生産管理</option>
<option value="コンサルタント">コンサルタント</option>
<option value="情報システム">情報システム</option>
<option value="研究・企画・開発">研究・企画・開発</option>
<option value="編集・設計・デザイン">編集・設計・デザイン</option>
<option value="教員・インストラクタ">教員・インストラクタ</option>
<option value="その他">その他</option>
</select>

※ 余白部分でダブルクリックすると、ソースを全選択できます!


関連リンク


さいごに

いかがでしょうか?

フォームをつくる度に同じようなコードを毎回書くのが面倒なので
備忘録的な感じでよく使うフォーム用コピペ一覧を作ってみました。

デフォルトのselectボックスはあんまり可愛くないので、
関連リンク集からお気に入りのカスタマイズも一緒に探してみてください。

ではではまた次の記事でー!