5/18のまとめ

授業メモ


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの練習</title>
</head>

<body>
<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>スマートフォン:<label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
<label><input type="checkbox" name="mobile" value="1">Android</label>
<label><input type="checkbox" name="mobile" value="1">その他</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>
<p>言語:<select name="language">
<option value="" selected>言語を選択してください</option>
<option value="1">日本語</option>
<option value="2">英語</option>
<option value="3">フランス語</option>
<option value="4">スペイン語</option>
<option value="5">韓国語</option>
</select></p>
<p>パスワード:<input type="password" name="password" size="14" maxlength="7" value="password"></p>
<form action="#" method="post" enctype="multipart/form-data">
<p>写真:<input type="file" name="picture"></p>
</form>
<form><p><input type="hidden" name="user_id" value="012345"></p></form>
<p><input type="submit" value="送信"><input type="submit" value="リセット"></p>
</form>
</body>
</html>

フォーム
  • 入力するメリットがないと書かない→等価交換
  • 中小企業なら電話、FAXの番号を大きくした方がよい
  • size: 箱の大きさ
  • maxlength: 実際に入る大きさ
  • value: 選択肢がたくさんある場合、数字にした方がわかりやすい
  • チェックボタン: いくつでもチェックできる
  • ラジオボタン: ひとつだけ
  • プログラミングのときにlabel for を使ってid と紐付ける



Photoshop-ポラロイド写真風の加工
  1. 背景に白い長方形を描き、複製
  2. 透明部分をロックして黒く塗りつぶし、ぼかし→ガウス
  3. ぼかしを白い長方形の後ろに移動させ、変形→不要な部分をカット
  4. 写真部分になる四角をシェイプ(黒)で描き、マスクにする
  5. 写真を上のレイヤーにコピーし、レイヤーパレットのマスクと写真の間をAlt クリック
  6. マスクにドロップシャドウ シャドウ(内側)をかける

上のマスク部分はシャドウ(内側)をかけた。