プログラミングする男性

textareaにはvalue属性なんてものはありません【HTML】【備忘録】

みなさんこんにちは、渋木です。

昨日に比べると少しだけ肌寒さが戻ってきたような気がする一日でしたね。私は寒いのも暑いのも嫌いなので、さっさと春になってほしいです。去年は秋らしい日も少なかったし、暖かくて過ごしやすい日々が恋しい・・・。

まさに、春よ来い、ですね。

さて、今日はHTMLネタなんですが、完全にただの備忘録です。

結論から言うと、

「inputタグと違って、textareaタグにはvalue属性が使用できない」

というものです。

今日はちょうど今取り掛かっている、とあるECサイトのアンケートページを制作していました。デザイナーさんが納品したデザインカンプを元に、入力・確認・完了画面のフロントエンド開発と、バックエンド部分との連携処理を行うことが私の主な担当になります。

そんな中、バックエンド担当のエンジニアの方からこんな質問がありました。

「入力画面から確認画面に遷移する場合に、何らかのエラーで入力画面に戻されると、ラジオボタンやチェックボックスはきちんとデータが保持されてるのに、テキストボックス(textarea)の中身が消えちゃうんだけど、なにか心当たりある?」

・・・なんだそりゃ?w

ぶっちゃけサーバー側の問題なのでは?と思ったんですが、一応フロントエンドサイドでも原因を調べてみることにしたわけです。

・ inputタグのtype=”text”
⇒ いわゆる単一行だけのテキストボックス
・ textareaタグ
⇒ 複数行のテキストボックス

こんな感じですよね。

ちなみに今回の話題の「テキストボックス」とはinputタグのtype=”text”ではなく、textareaタグなんですが、色々調べた結果、冒頭の結論に至ったわけです。

ラジオボタンやチェックボックスなどのinput要素と同じくらいには使用頻度が高いtextarea要素ですが、これらはいわゆるform部品として考えられていて、「ユーザーが入力したデータや値を、サーバー側に送信するために使うHTMLタグ」であるわけです。

で、そのユーザーが入力したデータというのは、inputタグの場合であればvalue属性に保持されるんですね。

例①:
<input type=”text” value=”hogehoge”>
例②:
<input type=”checkbox” name="hoge" value=”1”>hoge1
<input type=”checkbox” name="hoge" value=”2”>hoge2
<input type=”checkbox” name="hoge" value=”3”>hoge3

hoge1 hoge2 hoge3

こんな感じです。

けれどtextareaは違います。

textarea例:
<textarea class="sample_textarea">
hogehoge
hogehogehoge
</textarea>

こう書くんです。違い分かりますか?

つまり、「textareaには開始タグと終了タグが存在するので、divやspanといった要素と同じように、タグの間に値(inputのvalueに相当するもの)を指定する」必要があるわけです!

・・・知ってるよそんなの!って方、たぶんたくさんいらっしゃると思います\(^o^)/

ぶっちゃけこれ、言われてみると当然というか、当たり前じゃん!って話なんですよね。。でもでもでも!input要素の印象が強すぎて、textareaにも同じノリでvalue属性書き加えちゃうエンジニアって割と居そうじゃないですか???(特にバックエンドメインのエンジニアさんに多い気が・・・(偏見甚だしい))

というわけで、フロントエンドメインのエンジニアのくせに、textareaの特徴にすぐに気づけなかった雑魚エンジニアの渋木の備忘録でした!

みなさんも気を付けてくださいね!