Htmlの input ・fieldset・labelについて学ぶ

-例-

CODE
  <label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text">
  </label>

-例-

利用規約と利用条件を読む

HTML の <fieldset> 要素

は、ウェブフォーム内のラベル 　label　などのようにいくつかのコントロールをグループ化するために使用します。

{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}
こちらデモソース

上記の例にあるように、 <fieldset> 要素は HTML フォームの一部をグループ化し、内側の -legend要素で <fieldset> のキャプションを提供しています。いくつかの属性を取りますが、特に重要なものとして form は、同じページの -formの id を含むことができ、 <fieldset> が <form> の中になくてもその一部として扱うことができたり、 disabled は、 <fieldset> およびその中身を一度に無効にすることができたりします。

属性

この要素にはグローバル属性があります。

disabled
この論理型属性が設定されている場合、 <fieldset> の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり formと一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の -legend要素の中のフォーム要素は無効になりません。
form
form要素の id属性を指定し、 <fieldset> 要素はたとえその中になくても、その一部とすることができます。なお、 <fieldset> 内の -input要素をフォームに関連付けたい場合は、それらの要素に直接 form 属性を使用する必要があります。どの要素がフォームに関連付けられているかは、 JavaScript で {{domxref("HTMLFormElement.elementsを使用して確認することができます。
name
グループに関連付けられた名前です。
注: fieldset 要素自身のラベルの役割は、その最初の子要素として配置した -legend要素が担います。

CSS でのスタイル付け

<fieldset> には、スタイル付けの特殊な考慮事項がいくつかあります。

displayの値は既定で block であり、ブロック整形コンテキストを確立します。 <fieldset> がインラインレベルの display の値でスタイル付けされた場合は inline-block として動作し、そうでなければ block として動作します。既定では、コンテンツを囲む 2px groove の境界線があり、少量の既定のパディングがあります。要素は既定で min-inline-size", "min-inline-size: min-contentを持ちます。

-legendが存在する場合は、 block-start 境界線の上に配置されます。 <legend> は縮小折り返しであり、整形コンテキストを確立します。 display の値はブロック的です。 (例えば、 display: inline は block として動作します。)

<fieldset> の内容を保持する無名のボックスが生成され、 <fieldset> から特定のプロパティを継承します。 <fieldset> が display: grid または display: inline-grid でスタイル付けされていた場合、無名ボックスはグリッド整形コンテキストになり、 <fieldset> が display: flex または display: inline-flex でスタイル付けされていた場合、無名ボックスはフレックス整形コンテキストになります。それ以外の場合はブロック整形コンテキストになります。

<fieldset> および <legend> に対しては、ページデザインに合うあらゆる方法で気軽にスタイル付けしてください。

例

単純なフィールドセット

この例は、本当に単純な <fieldset> の例で、 <legend> および1つのコントールが中にあります。

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}

無効化したフィールドセット

この例は無効化した <fieldset> で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した <fieldset> の中にあるので、無効になります。

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie">
    </div>
  </fieldset>
</form>

幅・高さ・サイズの調整<input type="text" size=" ">

【htmlだけ】size属性 テキスト



テキスト
<input type="text" size="10" value="テキスト">
<input type="text" size="15" value="テキスト">
inputの属性である「size」を使うことでhtmlだけでもサイズを変更することは可能です。
しかしこの場合、レスポンシブ対応ができていません。
今どきスマホの利用を無視できないので下記から紹介するCSSでサイズ変更する方法を利用しましょう。
【CSS】widthとpadding テキスト 
  <style>
.txt{
    display: inline-block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;
}
</style>
 <input type="text" class="txt" value="テキスト">
display inline-blockとは
box-sizingとは

結論からいうと「width」でサイズを変更します。 width height【要素の幅と高さを指定】
CSSのwidth（幅）とheight（高さ）の指定について説明します。あわせて注意点、min-width（最小幅）、max-width（最大幅）についても説明します。
この記事を読む
width:100%にすると横幅いっぱいのサイズにできます。
さらにborderやpaddingを指定すると100％を超えてしまうため、box-sizing: border-boxを指定します。