フォームを作るときの雛形サンプルhtml

2025年11月29日

当ページのリンクには広告が含まれています。

お問い合わせフォーム

リスト

りんご
みかん
もも

ユーザーId

パスワード　見えないようにする

　　パスワード

メッセージ

ラジオボックス

良い
普通
悪い

プルダウン

チェックボックス

赤　　
青
黄色

　aタグ　リンク属性　TOPへ

TOPへ

検索欄

h2 お問い合わせのHTML一覧

<form>
  <h2>お問い合わせフォーム</h2>
  
  <img src="https://okara-note.com/wp-content/uploads/2025/02/hsp-university-entrance-examination-1.png" 
       alt="イメージ" width="400" height="200"　style="margin: auto;">

<div style="margin: auto;">
<p>リスト</p>
<ul>  
<li>りんご</li>
<li>みかん</li>
<li>もも</li>
<ul/>

  <div style="margin: auto;">
    <p>ユーザーId</p>
    <input type="date">
　　<p>パスワード　見えないようにする</p>
    <label>パスワード</label>
    <input type="password"　name="userPassword">
  </div>

  <div style="margin: auto;">
    <p>メッセージ</p>
    <textarea style="width: 100%; height: 200px;"></textarea>
  </div>

  <div style="margin: auto;">
    <p>ラジオボックス</p>
    <label><input type="radio" name="result">良い</label><br>
    <label><input type="radio" name="result">普通</label><br>
    <label><input type="radio" name="result">悪い</label><br>
  </div>
 <br/>
　<div style="margin: auto;">
  <p>プルダウン</p>
　<select name="color">
   <option value="red">赤</option>
   <option value="red">青</option>
   <option value="red">黄色</option>
　<select/>
 <div />
  <br>
  <br>
  <br>
<div style="margin: auto;">
  <p>チェックボックス</p>
   <label><input type="checkbox" name="color" value="red">赤</label>
　　<br>
   <label><input type="checkbox" name="color" value="red">青</label>
   <br>
   <label><input type="checkbox" name="color" value="red">黄色</label>
   <br>
 <div />

<div style="margin: auto;">
    <p>検索欄</p>
    <input type="search" name="keyword"> <button type="submit">検索</button></input>
<br>

<div style="text-align: center">
<p>アンカーテキスト　リンクにとぶ</p>
<a href="https://okara-note.com">TOPへ</a>
 </div>


  <!-- ボタンを中央に配置 -->
  <div style="text-align: center">
    <button type="submit">送信</button>
  </div>

</form>