Web Form コントロール

ウェブページのフォームのコントロール

フォーム要素には様々なものがあることは、
「web-form構築」で見てきました。
今回は、
フォーム要素のinputで、
type(入力タイプ)がtextの時、
どういったコントロールがあるか、
見ていきたいと思います。

代表的なコントロールには
readonly：入力値を変更できない。送信はOK。 
disabled：入力値を変更できない。送信は不可。
placeholder：説明のため表示されるテキスト文。入力は可能。
maxlength：入力できる最大文字数の制限。
があります。

入力フォームの画像は下の様になります。

readonly、disabledは入力値を変更できません。
プレイスホールダは入力値を変更出来ます。
value6は6文字以上入力出来ません。
maxlengthは、パスワード入力では必要になります。

form.htmlのコードは下の様になります。


<form class="group">
    <ul>
      <li>
       <input type="text" value="readonly" readonly="readonly"/>
      </li>
      <li>
        <input type="text" value="disabled" disabled="true"/>
       </li>
       <li>
        <input type="text" placeholder="placeholder"/>
       </li>
       <li>
        <input type="text" value="value6" maxlength="6"/>
       </li>
      <li>
       <input type="submit" id="color" value="submit button"/> 
      </li>
   </ul>
  </form> 

スタイルは、
「web-form構築」の場合とほぼ同じです。
formの、
  margin: 0 auto;
  width: 300px;
により中央側に配置します。

typeがsubmitの時、
idを設定して、文字を赤にしています。

form.cssのコードは下の様になります。


form {
  margin: 0 auto;
  width: 300px;
  padding: 1em;
  border: 1px solid #CCC;
}
input{
  font: 1em sans-serif;  
  box-sizing: border-box;
  border: 1px solid #999;
}
#color{
  color:red;
}

以上です。