HTMLタグで覚える英単語(11):button、fieldset、form、input、label、legend、output

プログラミングをしているとHTMLに触れる機会はよくあります。そういったHTMLタグ(<b>など)の名前から英単語を覚えてみましょう。

記事の英語難易度は「初〜中級」です。


今回はbuttonやformなど、フォームに関連する英単語の1回目です。

サンプル全体

今回取り上げるタグの表示サンプルをまとめて示します。

▼ HTMLのサンプル

<form oninput="result.value=votes.valueAsNumber">
    <fieldset style="border:solid;padding:10px;">
        <legend>好きな作家</legend>
        <input type="radio" name="sakka" id="akutagawa">
        <label for="akutagawa">芥川龍之介</label><br/>
        <input type="radio" name="sakka" id="dazai">
        <label for="dazai">太宰治</label><br/>
        <input type="radio" name="sakka" id="natsume">
        <label for="natsume">夏目漱石</label>
    </fieldset>
    <br/>
    投票数を入力:<input type="number" name="votes" value="1" style="border:solid;">
    <br/>
    入力数:<output name="result"></output>
    <br/>
</form>
<br/>
<button type="button" style="border:solid;padding:10px;border-radius:10px;">投票する</button>

▼ 実際の表示

好きな作家


投票数を入力:
入力数:

<button>

<button>は文字通り「button」で、「ボタン」という名詞です。プログラミング必須英単語600+の前提英単語100に入っている単語です。

サンプルだと最下部に記載されています。

<fieldset>

<fieldset>は「field」と「set」からできている言葉です。

まず「field」は「フィールド」という名詞です。記入欄のことです。プログラミング必須英単語600+でベーシック300に入っています。一般英語としては、「分野」、「競技場」、「畑」、「戦場」、「現場」といった意味もあります。

次に「set」は「セット」という名詞です。「一式」や「一揃い」のことです。動詞の「設定する」が前提英単語100に入っています。

fieldset要素は、フォームに関係する要素をまとめてセットにするのに使われます。サンプルにあるように、legend、input、labelの各要素がセットにまとめられ、実線で囲まれています。

<form>

<form>もそのまま「form」です。「フォーム」という名詞で、前提英単語100に入っています。ユーザーが提出する「申し込み用紙」や「書式」のニュアンスです。

一般英語としては、名詞の場合は「形態」、動詞の場合は「形成する」や「組織する」といった意味もあります。

サンプルを見ると、最上位のform要素の下にさまざまな要素が配置されています。

<input>

<input>も文字通り「input」です。「入力」という名詞、または「入力する」という動詞です。ベーシック300に入っています。

なお反意語は後に登場するoutputです。

サンプルから分かるように、「input type=”radio”」や「input type=”number”」など、input要素にはいくつかのタイプがあります。

<label>

<label>はやはり「label」です。「ラベル」という名詞、または「ラベルを貼る」という動詞で、ベーシック300の英単語です。

label要素はインターフェイス要素の説明文に使われます。例えばサンプルを見ると、芥川龍之介のラジオボタンのラベルは「label for=”akutagawa”」です。

<legend>

<legend>もそのまま「legend」です。「(グラフなどの)凡例」や「(挿絵などの)説明文」という名詞です。

一般英語としては、「伝説」や「言い伝え」の意味があります。

legend要素には、親であるfieldset要素の説明文が記載されます。サンプルを確認すると、fieldset要素全体が実線で囲まれており、その説明として「好きな作家」というlegend要素のテキストが表示されています。

<output>

<output>もそのまま「output」です。「出力」という名詞、または「出力する」という動詞で、ベーシック300の英単語です。

前述のように、反意語はinput(入力、入力する)です。

output要素は、ユーザーの操作結果や計算の結果などを表示するための要素です。サンプルを見ると、「投票数を入力:」でユーザーが数字を入力できるようになっています。ここで入力した数字が「入力数:」の直後にあるoutput要素内に出力されています。

英単語まとめ

  • button【名詞】ボタン
    • 前提英単語100
  • field【名詞】フィールド
    • ベーシック300
    • 一般英語だと、「分野」、「競技場」、「畑」、「戦場」、「現場」
  • form【名詞】フォーム
    • 前提英単語100
    • 一般英語だと、「形態」(名詞)、「形成する」、「組織する」(動詞)
  • input【名詞/動詞】入力/入力する
    • ベーシック300
    • 反意語はoutput
  • label【名詞/動詞】ラベル/ラベルを貼る
    • ベーシック300
  • legend【名詞】凡例、(挿絵などの)説明文
    • 一般英語だと、「伝説」、「言い伝え」
  • output【名詞/動詞】出力/出力する
    • ベーシック300
    • 反意語はinput
  • set【名詞】セット
    • 動詞の「設定する」が前提英単語100

[筆者紹介]

西野 竜太郎

Ryutaro Nishino

翻訳者/情報技術者/IT英語専門家

訳書に『血と汗とピクセル』、『リセットを押せ』、著書に『アプリケーションをつくる英語』(第4回ブクログ大賞)、『ITエンジニアのための英語リーディング』、『ソフトウェア・グローバリゼーション入門』、『アプリ翻訳実践入門』など。
産業技術大学院大学修了(情報システム学修士)、東京工業大学大学院博士課程単位取得(専門は言語学)。TOEIC 985点。応用情報技術者、情報処理安全確保支援士試験合格。
東京通信大学外部講師。

リンク:ウェブサイトTwitter

Profile Picture