1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTML~フォーム作成②~

Last updated at Posted at 2021-03-04

前回の続きから始めていきます!
前回の続きはこちらからどうぞ👍▶ https://qiita.com/akari_0618/items/86e5e8b1535c5cec5d7f 

前回入力したものをブラウザで表示するとこうなっているかなと思います!
スクリーンショット 2021-03-04 13.23.20.png

これだと何を入力するのかわからないので名前をつけてあげましょう!
この名前を付けるのは"label"を使いましょう!

その際に使うのが"id属性"と"for属性"です。この子達がlabelの名前とinputで入力した値を紐付けてくれます!
紐付けではいくつかあるみたいなのですが、気になる人は自分で調べてみてください!!
id属性とfor属性についてはこちらを▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d

index.html
<label for="name">名前:</label>
<input type="text" id="name">
<textarea></textarea>
<label for="password">パスワード:</label>
<input type="password" id="password">

スクリーンショット 2021-03-04 14.00.02.png

id属性とかわかんないからめんどくさい!って思った方!
私もそうだから省略しちゃいましょう😇

index.html
<label>名前:<input type="text"></label>
<textarea></textarea>
<label>パスワード:<input type="password" ></label>

はい!こんな感じに楽になりましたね👌

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?