問い合わせフォームのサイズについて

このQ&Aのポイント
  • 問い合わせフォームのサイズについて、xhtmlでレスポンシブなサイトを作っている際、どのようなサイズ指定が正しいのか疑問です。
  • 現在、非レスポンシブの場合は特定のサイズ指定をしており、<input>タグの「size」属性や<textarea>タグの「cols」「rows」属性を使用しています。
  • しかし、レスポンシブにする際にはこれらのサイズ指定を削除し、代わりにCSSを使用して「max-width: 100%;」と指定するだけで十分なのか検討しています。
回答を見る
  • ベストアンサー

問い合わせフォームのサイズ

xhtmlでレスポンシブなサイトを作っているのですが、 問い合わせフォームのサイズはどのようにするのが正しいでしょうか? レスポンシブ出ない場合は下記のように造っているのですが、 <p class="newline"> 郵便番号:<br /> <input type="text" name="post" size="20" value="" /> </p> <p class="newline"> お問合せ内容:<br /> <select name="inquiry_contents"> <option value="" selected="selected" >選択してください</option> <option value="について">について</option> <option value="について">について</option> <option value="交通アクセスについて">交通アクセスについて</option> </select> </p> <p class="newline"> コメント:<br /> <textarea name="comment" cols="50" rows="8" title="こちらにお問い合わせ内容をご記入ください。" class="jq-placeholder">こちらにお問い合わせ内容をご記入ください。</textarea> </p> レスポンシブにする場合はsize="20" やcols="50" rows="8"などのサイズにかかわる属性をすべて削除して下記のようなCSSを加えればよいのでしょうか? input { max-width: 100%; } textarea { max-width: 100%; }

noname#226032
noname#226032
  • CSS
  • 回答数1
  • ありがとう数10

質問者が選んだベストアンサー

  • ベストアンサー
  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

sizeはブラウザによって大きさが変わるのでスタイルで指定したほうがいいと思います。 レスポンシブにする場合は、幅か小さい時は横いっぱいに広がるようにwidth100%を指定したら良いのでは。

noname#226032
質問者

お礼

>sizeはブラウザによって大きさが変わるのでスタイルで指定したほうがいいと思います。 CSSのemでサイズを指定すれば良いのですね。

関連するQ&A

  • メール問い合わせフォームがうまく表示されません

    現在ホームページを作成していて、 メール問い合わせフォームをうめこんだのですが、 必要事項を入力して「送信する」ボタンをおしてメール送信画面に移ると、 入力した文字が化けてしまいます。 どなたか修正方法をお教えいただけませんでしょうか。 宜しくお願い致します。 ≪HTML メール問い合わせ部分≫ <div class="contactBox clearfix">ヘアレスキュー・カプラに関するご質問・お問い合わせは、以下のフォームよりご連絡 ください。 <br> <form method="post" action="mailto:info@ka***.jp"> <p>お名前<br> <input size="20" name="name" type="text"></p> <p>メールアドレス<br> <input size="40" name="mail_address" type="text"></p> <p>性別<br> <input name="gender1" value="1" type="checkbox">男性  <input name="gender2" value="1" type="checkbox">女性</p> <p>お問い合わせ内容<br> <select name="seg"> <option selected="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>詳細<br> <textarea rows="5" cols="60" name="comment"></textarea></p> <p><input value="送信する" type="submit"></p> </form> </div>

  • 複数のフォームを一括で送信することは可能ですか?

    それらしきキーワードで検索しても出てこないので 頓珍漢な質問をしてるかもしれませんが、ご容赦ください。 送信ボタンは同一フォーム内のデータを送信できると思うのですが 複数のフォームを1つの送信ボタンで送信することは可能でしょうか? 例えば、下の2つのフォームを1つの送信ボタンでデータ送信することは可能でしょうか?2つのフォームを1つに合わせるというのは なしでお願いいたします。 <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>お名前 :<input type="text" name="name" size="40"></p> <p> メッセージ: <br> <textarea cols="50" rows="5" name="message"></textarea> </p> <p><input type="submit" value="送信する"></p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>お名前 :<input type="text" name="name" size="40"></p> <p> メッセージ: <br> <textarea cols="50" rows="5" name="message"></textarea> </p> <p><input type="submit" value="送信する"></p> </form>

    • ベストアンサー
    • HTML
  • 複数のフォームを一括で送信することは可能ですか?

    CGIの勉強を始めたばかりの初心者です。 本に簡単なフォームメールがあったのですが、複数のフォームを一括でデータ送信する方法はあるのでしょうか? http://oshiete1.goo.ne.jp/qa3395953.htmlで教えて頂いた方法を真似て、以下のようにしてみたのですが、これだと1つのフォームしかデータ送信できないです。 CGIの方もいじらないと複数のフォームを一括送信はできないのでしょうか? <script language="javascript"><!-- function send() { document.nform.submit(); document.nform2.submit(); } //--></script> <form name="nform" method="POST" action="./5-2.cgi"> <p>お名前 :<input type="text" name="name" size="40"></p> <p> メッセージ: <br> <textarea cols="50" rows="5" name="message"></textarea> </p> </form> <form name="nform2" method="POST" action="./5-2.cgi"> <p>お名前 :<input type="text" name="name" size="40"></p> <p> メッセージ: <br> <textarea cols="50" rows="5" name="message"></textarea> </p> </form> <input type="button" value="送信" onClick="send()">

    • ベストアンサー
    • CGI
  • フォームに入力した値の制御について

    フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1:' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問2:' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問3:' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問4:' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問1:</strong><br> <input type="text" name="text01" value="1入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2:</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3:</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 3入力してください </textarea><br> <strong>・諮問4:</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 4入力してください </textarea><br> <strong>・出力結果:</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);">&nbsp;<br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>

  • フォームについて

    マイホームページに 下記のようなフォームを作成しました。 <font color="#666666" size="2" face="MS Pゴシック, Osaka">このサイトについての感想、ご意見</font> <br> <br> <br> <form action="/cgi-bin/FormMail.cgi" method="POST"> <font color="#666666" size="2" face="MS Pゴシック, Osaka">お名前</font>:<input type="text" name="realname" size="30"> <br> <br> <font color="#0099FF" size="2" face="MS Pゴシック, Osaka">メールアドレス</font>: <input type="text" name="email" size="35"> <br> <br> ご意見・ご感想: <textarea name="textfield" cols="50" rows="5"></textarea>     <br> <br> <input type="hidden" name="recipient" value="yssm@cameo.plala.or.jp"> <input type="hidden" name="required" value="email,realname"> <input type="hidden" name="subject" size="50" value="TEST MAIL from WWW" /> <input name="submit" type="submit" value="送信" /> <input type="reset" value="初めから書き直す"> </form> これを私のメールアドレス(yssm@cameo.plala.or.jp)に送信したいのですがうまくいきません。 基本的な部分、思考が間違っているのでしょうか。 ご回答をよろしくお願いいたします。

  • PHPのお問い合わせフォームが動かない

    「ぶっとびねっと」というレンタルサーバーに以下の2つのファイルをアップしました。 ・contacts.html ・contacts.php しかしフォームに入力後、送信を押してもメールが指定したアドレスに届きません。 なぜでしょうか。。。 ソースを下に貼りますので、ご教授願います。 -----  contacts.html  -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メールフォーム</title> </head> <body> <form method="post" action="contacts.php"> お名前:<input type="text" name="namae" /><br /> メールアドレス:<input type="text" name="meado" /><br /> 件名:<input type="text" name="subject" /><br /> お問い合わせ内容:<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------ -----  contacts.php  -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"    /> <title>メールフォーム</title> </head> <body> <?php if ($_POST["submit"] == "メール送信") { mb_language("Ja") ; mb_internal_encoding("UTF-8") ; $mailto="○○○○@hotmail.co.jp"; $subject = $_POST["subject"]; $content = $_POST["content"]; $namae = $_POST["namae"]; $meado = $_POST["meado"]; $mailfrom="From:" .mb_encode_mimeheader($namae) ."<".$meado.">"; mb_send_mail($mailto,$subject,$content,$mailfrom); } ?> <form method="post" action=""> お名前:<input type="text" name="namae" /><br /> メールアドレス:<input type="text" name="meado" /><br /> 件名:<input type="text" name="subject" /><br /> お問い合わせ内容:<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------

    • ベストアンサー
    • PHP
  • メールフォームが自作できません

    HTMLは何となく分かる範囲で記述しました。 CSSで体裁を整える予定ですので、ここでは割愛させていただきます。 Perlも勉強したのでやってみたのですが、何故か目的とするメアドではなく送信元にメールが送られ、困っています。 HTMLはこんな感じで書いてみました。 <body> <form> <p>お名前&nbsp;&nbsp;<input type="name" size="30" maxlength="30" value=""><br> メールアドレスを入力して下さい<input type="mail" size="50" maxlength="50" value=""><br> ご質問・メッセージなどを入力して下さい。<br> <textarea name="mess" cols="50" rows="5"></textarea></p> <p><input type="submit" value="送信する">&nbsp;<input type="reset" value="やり直し"></p> </form> </body> Perlのソースも記述すべきでしょうが、参考書をなくしてしまいました。 使った参考書はマイコミから出版された「よくわかるPHPの教科書」です。 みなさんのお力を貸していただきたいです。

  • HTML5メールフォームの作り方

    お世話になります。HTML5のテンプレートを使用してメールフォームを作成しようとしておりますが、なかなかうまくいきません。action=""にメールアドレスを入れてみましたが、できませんでした。どなたかお分かりの方いらっしゃいましたら、どうかよろしくお願い致します。 <form id="contact" action="contact.html" method="post"> <div class="form_settings"> <p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p> <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> <p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p> <p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p> </div> </form>

    • ベストアンサー
    • HTML
  • ホームページ作成・フォームの送信について

    HP作成で多分初歩的なことだと思うのですが… 入力されたフォームの内容を送信する際、メールアドレスを使おうと思っています。 <form action="mailto:メールアドレスを入力"method="post"><br> お名前<p> <input type="text"name="name"><br><br> メッセージ<p> <textarea rows=8 cols=40 wrap="hard" name="メッセージ"></textarea><br><br> サイト評価<p> <input type="radio"name"goodorbad"value="良い">良い <input type="radio"name"goodorbad"value="普通">普通 <input type="radio"name"goodorbad"value="良くない">良くない <input type="reset"value="リセットします"> <input type="submit"value="投函する"><br><br><br> </form> だと送信ボタンをクリックした時にメールの新規作成画面に飛んでしまいます。 これはどこかおかしいのでしょうか?

  • FPでのフォーム送信設定について。

    FrontPage2000を用いてサイトを作っています。 メルフォを入れようと思いフォーム挿入→スクロールボック、フォームのオプションにて送信先を自分のメールアドレスに設定しようとしているのですが、何度やっても送信が出来ません。タグをいじるしかないと思うのですが以下のように出ています。 mailtoの先が自分のアドレスとご理解下さい。 どこに問題があるか教えてもらえれば幸いです。 <form method="POST" action="mailto:nobu-++"> <p align="left"><textarea rows="4" name="S1" cols="39"></textarea><br> <input type="submit" value="送信" name="B1"><input type="reset" value="リセット" name="B2"></p> </form>

    • ベストアンサー
    • HTML

専門家に質問してみよう