先日とある会社のホームページでの入力フォームを制御するために、
ChatGPTに聞きながらJavascriptでコードを書いていたプログラム初心者がいたんですよ〜。
な〜に〜、やっちまったな〜！
男は黙って、「HTML」！
1. リンクがうまく飛ばない？
別タブ（別ウィンドウ）で表示させたいのに、そうならないこのコードの間違いはどこ？
<a href="https://example.com" target="blank">公式サイトへ</a>
- target="blank" の指定方法が間違っている
- href にURLが足りない
- a タグは終了タグ不要
- ダブルクォートは不要
正解
正解を見る。
1. target="blank" → target="_blank"
解説
target="_blank" は新しいタブで開く指定。
アンダースコア _ が抜けていると無視されます。
修正コード
<a href="https://example.com" target="_blank">公式サイトへ</a>
2. 見出しが変になって表示される？
次のコードの問題点は？
<h1>ようこそ！
<p>これはテストページです。</p>
</h1>
- <p> は <h1> の中に書いてはいけない
- <h1> に終了タグがない
- 見出しと段落は同じ意味になる
- <p> タグはインラインで書く
正解
正解を見る。
1. <p> は <h1> の中に書いてはいけない
解説
<label> タグには for 属性 を付けることで、対応する入力フィールドと結びつけるべきです。
これがないと、クリック時に対応フィールドにフォーカスされない ため使い勝手が悪くなります。
3. 画像が表示されない？
HTMLコードは正しそうですが、画像が表示されません。
以下のうち、ありがちな原因を推測してみましょう？
<img src="images/photo.jpg" alt="風景">
- alt 属性が間違っている
- src のパスが間違っている
- <img> タグは閉じタグが必要
- ファイル名に日本語が使われている
正解
正解を見る。
2. src のパスが間違っている
解説
src="images/photo.jpg" のパスが間違っているか、ファイルが存在しない可能性が高いです。
パス指定ミスは超定番ミス！
４. フォームの送信ができない？
次のHTMLは、入力フォームをサーバーに送信するコードですが、正常に送信できません。何故？
<form action="/submit" method="post">
<input type="text" name="name">
<button type="button">送信する</button>
</form>
- <form> タグに id が必要
- method="post" は小文字NG
- name 属性が不要
- buttonタグのtype属性が間違っている
正解
正解を見る。
4. buttonタグのtype属性が間違っている
解説
buttonタグのtype属性をsubmitボタンとして使うには、type="submit" とする必要があります。
修正コード
<form action="/submit" method="post">
<input type="text" name="name">
<button type="submit">送信する</button>
</form>
5. 改行が反映されない？
このコードの問題点は？
<p>これは1行目です。
これは2行目です。</p>
- 改行には <br> が必要
- <p> タグは複数行対応していない
- p は自動的に改行してくれるはず
- 空白行を入れないとダメ
正解
正解を見る。
1. 改行には <br> が必要
解説
HTMLでは、ソースコード内の改行はそのまま表示に反映されません。
改行したい場合は <br> を使いましょう。
修正コード
<p>これは1行目です。<br>
これは2行目です。</p>
あとがき
非常に簡単なのに、いまだに何故かやってしまう失敗を元に問題を作ってみました。
自分で作ったコードで、今回の問題のような凡ミスで、1時間ぐらい悩んでしまうことも何回かあったんですよね。
簡単なミスほど、見つけづらいかもしれませんね。
0 件のコメント:
コメントを投稿