Web Form inputコントロール

inputのフォームのコントロール

inputフォームのコントロールには、
type=textの他にも、
passwordとか色々あります。
下に画像を用意しました。

画像を上から順に説明していきます。
password
パスワードを入力するときに使います。
表示を分からなくし、入力することが出来るようになります。
hidden
隠し入力に使います。
ユーザーからは見えないデータを送信するとき使います。
button
匿名ボタンとして使います。
checkbox
checked 属性を入れておくと、
ぺ―ジを表示擦るときチェックが入っています。
radio
複数のラジオボタンを表示するとき使います。
下の画像では2つ用意しています。
nameを同じにすることで、
チェックが一つしか選択できなくなります。
ここではname="fluit"で同じにしています。
file
ファイルを選択し送信するとき使います。
image
イメージを表示、クリックで送信になります。
reset
すべてのフォームの値をデフォルトにリセットします。
form.htmlのコードは以下の様になります。


 <form>    
    <ul>
      <li>
        <input type="password" id="pwd" name="pwd" placeholder="password" maxlength="4">
      </li>
      <li>
        <input type="hidden" id="timestamp" name="timestamp" value="2021/03/25">
       </li>        
       <li>
        <input type="button" value="anonymous">
       </li>
       <li>       
        <input type="checkbox" id="meat" name="meat" value="meat" checked>
        <label for="meat">Meat</label> 
       </li>  
       <li>            
        <input type="radio" id="apple" name="fluit" value="apple" >
        <label for="apple">Apple</label>
       </li>
       <li>
        <input type="radio" id="banana" name="fluit" value="banana">
        <label for="banana">Banana</label>
       </li>
       <li>
        <label for="file">File</label> 
        <input type="file" name="file" accept=".txt" id="file">        
       </li>         
       <li>
        <input type="image" alt="Click" src="" width="250" height="100" > 
       </li>
       <li>
        <input type="reset" value="reset">
       </li>             
   </ul>
  </form>

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

form{
  margin: 0 auto;
  width: 500px;
  padding: 1em;
  border: 2px solid rgb(31, 30, 30);
}

input{
  font: 1em sans-serif;  
  box-sizing: border-box;
  border: 2px solid rgb(12, 12, 12);
}

以上です。