MENU
  1. ホーム
  2. 未分類
  3. フォームを作るときの雛形 サンプルhtml

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

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

お問い合わせフォーム

イメージ

リスト

  • りんご
  • みかん
  • もも

      • ユーザー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>

      関連記事:

      1. MBTI 16personalitiesの内向型(I)タイプ8選
      2. 【HSP】旅行で疲れるシーンと対策9つを解説
      3. 【HSP】ノイズキャンセリングイヤホンのオススメ6選　つけると落ち着く！
      4. 【内向型の趣味9選】内向型にオススメの趣味を内向型がしょうかい
      未分類
      よかったらシェアしてね！
      • URLをコピーしました！
      • URLをコピーしました！

      この記事を書いた人

      おからーのアバター おからー

      内向型HSPの大学4年生
      中学・高校で自身の性格や人間関係で悩む➡内向型・HSPを知る
      ➡自分の性格や強みを知り、毎日が充実したものに

      内向型・HSPの方、特に学生さんの悩みが減り、毎日が充実する記事を書いてます。

      この著者の記事一覧へ

      関連記事

      関連する記事はまだ見つかりませんでした。

      こちらもオススメ

目次