授業メモ 5月18日

授業メモ

フォームの復習

フォームの基本 - jsdo.it - share JavaScript, HTML5 and CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
<style>
body {
  background-color: #f2f2f2;
}
h1 {
  font-size: 1.4em;
  color: blue;
}
h2 {
  font-size: 1.2em;
  color: coral;
}
</style>
</head>

<body>

<h1>お問い合せフォーム</h1>
<form action="#" method="post">
  <p>名前：<input type="text" name="name" size="20" maxlength="10"
  value="お名前"></p>
  <p>内容：<textarea name="subject" rows="5" cols="40">
  お問い合せ内容</textarea></p>
  
<h2>チェックボックス</h2>
  <p>スマートフォン：
    <input type="checkbox" name="mobile" value="1" checked>iPhone
    <input type="checkbox" name="mobile" value="2">Android
    <input type="checkbox" name="mobile" value="3">その他
  </p>
  
  <h2>ラジオボタン</h2>
    <p>性別：
      <input type="radio" name="sex" value="male" checked>男性
      <input type="radio" name="sex" value="female">女性
    </p>
  
  <h2>リスト</h2>
    <p>言語：
    <select name="language">
      <option value="">言語を選択してください</option>
      <option value="1" >日本語</option>
      <option value="2">英語</option>
      <option value="3">フランス語</option>
      <option value="4">スペイン語</option>
      <option value="5">韓国語</option>
    </select>
    </p>
  
  <h2>ラベルを付ける</h2>
    <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
    <label><input type="checkbox" name="mobile" value="2">Android</label>
    <label><input type="checkbox" name="mobile" value="3">その他</label>
  </p>

    <p>性別：
      <input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label>
      <input type="radio" name="sex" value="female" id="female"><label for="female">女性</label>
    </p>
  
  <h2>パスワード</h2>
    <p>パスワード：
      <input  type="password" name="password" size="10" maxlength="5" value="00000">
    </p>
    
  <p><input type="submit" value="送信"></p>
</form>
  
<h2>写真をアップロード</h2>
<form action="#" name="post" enctype="multipart/form-data">
<p>写真：
  <input type="file" name="picture">
</p>
</form>

</body>
</html>