問い合わせフォームの作り方

下記のように問い合わせフォームを作ったのですが、ｄｔ、ddの上下の隙間は、マージンで作りますか？

これらは、インライン要素、ブロック要素の所に記載がなかったのですが、ブロック要素と同じ性質と考えてよいでしょうか？

<form action="" role="form"> <dl> <dt><label for="name">お名前</label></dt> <dd><input id="name" name="name" onclick=”” autofocus required></dd> <dt><label for="tel">電話番号</label></dt> <dd><input id="tel" name="tel" onclick=”” required></dd> <dt><label for="email">メールアドレス</label></dt> <dd><input id="email" name="email" onclick=””></dd> <dt><label for="body">コメント</label></dt> <dd><textarea id="body" rows="5" cols="30" name="body" placeholder="お時間があれば、具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd>  </dl> <button type="submit">送信</button> </form>

また、最後にhttps://validator.w3.org/でバリデートした所、下記のようなエラーが出たのですが、name属性は、属性の始めでないといけないなどあるのでしょうか？

Error: Bad value ”” for attribute onclick on element textarea: illegal character
From line 142, column 15; to line 142, column 85

<dd><textarea id="body" rows="5" cols="30" name="body" onclick=”” required></text

行動規範の内容に同意します

回答1件

エラーの内容ですが、onclick="" の所が空っぽですと言っているように見えます。
必要ないのでしたら、削ってしまっては如何でしょうか？

ご質問の、隙間の取り方ですが、手段ではなく、目的を書いて頂けるとみなさんも
反応しやすいと思います。

手段は幾通りもあり、おっしゃる通りCSSで marginや、padding、relativeにして
topでも隙間を作ることはできますが、どのように表現したいかで色々お答えも
変わってくるのかなと思います。

この例では tableで構成し、tdのpaddingで隙間を取っているように見えます。

投稿2015/09/12 15:40

Ken.sakanakana

総合スコア1768

退会済みユーザー

2015/09/12 16:43

onclick=""はIOS5のラベルタグに対するバグに必要ということで付けています。無くてもテキストをクリックしただけで、選択できますか？＞＞手段は幾通りもあり、おっしゃる通りCSSで marginや、padding、relativeにして topでも隙間を作ることはできますが、どのように表現したいかで色々お答えも変わってくるのかなと思います。特にどれで隙間を空けても特に問題ないのですね。

退会済みユーザー

2015/09/13 09:23

すいません。エラーのコピペ場所が間違えていました。改めで下記に記載します。テキストエリアタグにname属性は使えないようなエラーが出ています。 name属性は使えるはずですが、バリデートのミスでしょうか？ Warning: Attribute 　name is not serializable as XML 1.0. From line 142, column 15; to line 142, column 85 <dd><textarea id="body" rows="5" cols="30"　name="body" onclick=”” required></text Error: Attribute 　name not allowed on element textarea at this point. From line 142, column 15; to line 142, column 85 <dd><textarea id="body" rows="5" cols="30"　name="body" onclick=”” required></text

Ken.sakanakana

2015/09/13 14:42

StackOverFlowでも同様の質問を見つけました。 http://stackoverflow.com/questions/11491639/w3c-markup-validation-html5-textarea ここでは、確かに nameの位置を最初に持ってくると治っているようです。後は、HTML5から利用できるようになった required ですが、上記URLでは required="required" とされているようです。 XML1.0というエラーが出ているようですが、HTMLは HTML5で作成されているのでしょうか？ http://www.flapism.jp/html/107/

退会済みユーザー

2015/09/14 08:37

お返事ありがとうございます。もちろん、下記のように宣言しています。 <!DOCTYPE html> <html lang="ja-jp"> nameの位置をidより先に持ってこないとエラーが出るのですね。ただこれは、文法上そのようにしないといけないわけではなく、バリデートが、間違えてそのように表記しているだけないのでね。

退会済みユーザー

2015/09/14 08:52

<dd><input id="name" name="name" onclick=”” autofocus required></dd> 上記を <dd><input id="name" name="name" onclick=”” autofocus required="required"></dd> とrequired="required"にした方がより文法的にも正しいのですね。また、onclick=""はIOS5のラベルタグに対するバグに必要ということで付けていますが、これはバリデートのバグは諦めるしかなさそうですね。皆さんつけていませんか？

行動規範の内容に同意します