- ベストアンサー
テキスト・セレクトフォームにて何も入力されていない状態ではフォームの色を変えるためには
Rubyを使用して掲示板のシステムを作成しています。 必須項目 <input type="text" name="textfield"><br> 任意項目 <input type="text" name="textfield2"><br> 必須項目 <input type="text" name="textfield3"><br> 必須項目 <textarea name="textarea"></textarea><br> 必須項目 <select name="select"></select> と複数のテキストフォームとセレクトフォームがあり，その一部が必須項目です。そこで必須項目と分かるようにフォームの入力部分を赤く塗り，何か文字が入力されたら（何か選ばれたら），元の白の状態にしたいと考えています。 このようなことは実際可能なので使用か。ご教授お願いします。
- community
- お礼率50% (2/4)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょうか？ <style> <!-- .must { background-color:pink;border-color:red; } //--> </style> <script type="text/javascript"> <!-- function change(f){ f.style.backgroundColor="white"; } //--> </script> </head> <body> <input class="must" type="text" name="textfield" onkeypress="change(this)"><br> <input type="text" name="textfield2"><br> <input class="must" type="text" name="textfield3" onkeypress="change(this)"><br> <textarea name="textarea"></textarea><br> <select class="must" name="select" onchange="change(this)"></select> </body>
その他の回答 (1)
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 No1さんのソースをお借りして、ちょっと変えてみました・・・。 （No1さん、感謝です） <style> <!-- .must { background-color:pink;border-color:red; } //--> </style> <script type="text/javascript"> <!-- function change(f){ //alert(f.value); if(f.value!=""){ f.style.backgroundColor="white"; }else{ f.style.backgroundColor="pink"; } } //--> </script> </head> <body> <input class="must" type="text" name="textfield" onblur="change(this)"><br> <input type="text" name="textfield2"><br> <input class="must" type="text" name="textfield3" onblur="change(this)"><br> <textarea name="textarea"></textarea><br> <select class="must" name="select" onchange="change(this)"></select> </body> イベントを「onblur」にして、ロジックに「if」で色を変えるように追加しました。 (^^ゞ
関連するQ&A
- フォームに入力したデータの受け渡しについて
左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか？ 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト：</br> <input type="text" name="aaa" /></br> ラジオ：</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック：</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目：</br> <select name="ddd"> <option>Ａ</option> <option>Ｂ</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" /> <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。
- 締切済み
- JavaScript
- セレクトメニューのチェックと条件一致による入力チェック
(1)メールフォームでセレクトメニューの「都道府県」部分で選択して送信する場合にJAVAで入力チェックエラーを表示させるにはどうしたらよいでしょうか？(東京、千葉、埼玉はＯＫ) Javaサンプルソースを配布しているサイトを教えて下さい。 (2)JAVAによる入力チェックで「ＹＥＳ」にチェックされた場合に、テキストエリアを入力必須にするエラー表示方法を紹介しているサイトを知っていたら教えて下さい。 --------------------------------------------------------------- <form>名前：<input size="20" type="text" name="name"><br> 住所：<select size="1" name="adress"> <option value="東京">東京</option> <option value="千葉">千葉</option> <option value="埼玉">埼玉</option> <option value="都道府県" selected>都道府県</option> </select><input size="20" type="text" name="adress2"><br> （都道府県の場合はエラー表示）<br> <hr> 選択：<input type="radio" name="sentaku" value="yes">ＹＥＳ <input type="radio" name="sentaku" value="No">ＮＯ<br> <hr> ＹＥＳの場合コメント記載<br> <textarea rows="2" cols="20" name="coment"> ----------------------------------------------------------------
- 締切済み
- Java
- 入力フォームについて
ＦＣ２のホームページを利用しています 入力フォームのサンプルを手本にして、以下のように作成しましたが 「送信ボタン」をクリックしても、メールが届きません。 どうしてでしょうか？ <form action="mailto:xxx@xxx.ne.jp" enctype="text/plain" method="post"> <p><label>NAME：<br /> <input type="text" name="名前" value="" tabindex="1" accesskey="b"> </label></p> <p><label>E-MAIL：<br /> <input type="text" name="メールアドレス" value="" tabindex="2" accesskey="a"> </label></p> <p><label>感想・ご意見<br> <textarea name="title" rows="15" cols="30" tabindex="9" accesskey="i"> </textarea> </label></p> <p> <input type="reset" value="送信" tabindex="10" accesskey="s"> <input type="reset" value="取消" tabindex="11" accesskey="r"> </p> </form>
- 締切済み
- HTML
- JAVASCRIPTで、ボタンを押したら 入力項目を追加できるようにしたい。
FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい） どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <select> <option value=" " selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>
- ベストアンサー
- JavaScript
- フォームに入力した値の制御について
フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[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 += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" 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"> ３入力してください </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"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- select値でのフォームのaction値の変更
以下のようなフォームでselectの値によって PHPでactionのURLを変更させるようなことは出来るでしょうか。 <form name="form" method="GET" action="ここをselect値により変更"> <input type="text" name="word" id="word" value="" /> <select name="select" id="select"><option selected="selected" value="01">値01</option> <select name="select" id="select"><option selected="selected" value="02">値02</option> <select name="select" id="select"><option selected="selected" value="03">値03</option> </select> </form> 以上、どうぞ宜しくお願い申し上げます。
- ベストアンサー
- PHP
- アンケートフォームについて
携帯電話からアンケートを送信出来るようにしたいのですが、どういう風にしたらよいか教えて下さい。 初心者ですのでわかり易く説明して頂くと幸いです。 タグは <HTML> <HEAD> <TITLE>登録</TITLE> </HEAD> <BODY> <BR><FORM action="mailto:**@yahoo.co.jp" METHOD="get" enctype="text/plain"> 氏名:<INPUT TYPE=TEXT NAME="name"><BR> メールアドレス:<INPUT TYPE=TEXT NAME="number"> <BR> ホームページURL:<INPUT TYPE=TEXT NAME="number"> <BR> 在住市名<BR> <SELECT NAME="市名"> <OPTION VALUE="○市">○市 <OPTION VALUE="○市">○市 <OPTION VALUE="その他">その他</SELECT><BR> ご意見・ご感想をお寄せ下さい。<BR> <TEXTAREA NAME="感想 rows=" COLS=10 5"></TEXTAREA><BR> <BR> 当サイトを知ったきっかけは？<BR> <INPUT TYPE=RADIO NAME="きっかけ" VALUE="検索">検索サイト<BR> <INPUT TYPE=RADIO NAME="きっかけ" VALUE="友人・知人">友人・知人<BR> <INPUT TYPE=RADIO NAME="きっかけ" VALUE="雑誌">雑誌<BR> <INPUT TYPE=RADIO NAME="きっかけ" VALUE="広告・チラシ">広告・チラシ<BR> <INPUT TYPE=SUBMIT VALUE="送信"><INPUT TYPE=RESET VALUE="やり直し"><BR> </FORM></BODY> </HTML>
- ベストアンサー
- CGI
- Javascriptで複数のテキストエリアの文字列を連結させたいです
Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。
- ベストアンサー
- JavaScript
- 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip
選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- メールフォームにある必須入力について
こんばんは、今メールフォームを作っています。入力画面→確認画面→完了ページという流れで作ったのですがよく必須項目に何も入れなかったり、間違った文字をいれたりするとエラーページが表示されるようにしたいと思っているのですが、なかなか上手くできません。下記のスクリプトからだとどうやってやったら良いのでしょうか？よろしくおねがいします。 <?php if (! isset($_POST[btn1]) and! isset($_POST[btn2]) and! isset($_POST[cancel])) { //入力画面 $body = "必要な項目を入力して[OK]ボタンをクリックしてください。 <FORM action='$_SERVER[PHP_SELF]' method='POST'> 名前：<INPUT size='40' type='text' name='name'><BR><BR> フリガナ：<INPUT size='40' type='text' name='kana'><BR><BR> 電話番号：<INPUT size='40' type='text' name='tel'><BR><BR> E-Mailアドレス：<INPUT size='40' type='text' name='email'><BR><BR> お問い合わせ内容：<BR><TEXTAREA rows='6' cols='40' name='inquiry'></TEXTAREA><BR><BR> <INPUT type='submit' name='btn1' value=' OK '> </FORM>"; } elseif (isset($_POST[btn1])) { //入力画面で[OK]がクリックされたとき $name = htmlspecialchars(stripcslashes($_POST[name])); $kana = htmlspecialchars(stripcslashes($_POST[kana])); $tel = htmlspecialchars(stripcslashes($_POST[tel])); $email = htmlspecialchars(stripcslashes($_POST[email])); $inquiry = htmlspecialchars(stripcslashes($_POST[inquiry])); $body = "ご入力した内容でメッセージを送信します。<BR> よろしければ[送信]ボタンをクリックしてください。 <FORM action='$_SERVER[PHP_SELF]' method='POST'> 名前：$name<BR><BR> フリガナ：$kana<BR><BR> 電話番号：$tel<BR><BR> E-Mailアドレス：$email<BR><BR> お問い合わせ内容：<BR>" . nl2br($inquiry) . "<BR><BR> <INPUT type='submit' name='btn2' value=' 送信 '> <INPUT type='submit' name='cancel' value='キャンセル'> <INPUT type='hidden' name='name' value=\"$name\"> <INPUT type='hidden' name='kana' value=\"$kana\"> <INPUT type='hidden' name='tel' value=\"$tel\"> <INPUT type='hidden' name='email' value=\"$email\"> <INPUT type='hidden' name='inquiry' value=\"$inquiry\"> </FORM>"; } elseif (isset($_POST[btn2])) { //確認画面で[送信]がクリックされたとき //メールの送信処理を行う $name = stripcslashes($_POST[name]); $kana = stripcslashes($_POST[kana]); $tel = stripcslashes($_POST[tel]); $email = stripcslashes($_POST[email]); $inquiry = stripcslashes($_POST[inquiry]); $mailto = "kuma202000@yahoo.co.jp"; $mailsbj = "メールフォームからの送信"; $mailbody = "$name さんからのメールが届きました。\n" . "---------------------------------------------\n" . "名前：$name \n" . "フリガナ：$kana \n" . "電話番号：$tel \n" . "E-Mailアドレス：$email \n" . "メッセージ：$inquiry \n" . "---------------------------------------------\n"; mb_language("ja"); if (mb_send_mail($mailto, $mailsbj, $mailbody, $mailheader)) { $body = "メールを送信しました。ありがとうございました。<BR><BR>"; } else { $body = "メールの送信に失敗しました。<BR><BR>"; } $body .= "<A href='$_SERVER[PHP_SELF]'>戻る</A>"; } elseif (isset($_POST[cancel])) { //確認画面で[キャンセル]がクリックされたとき header("location: $_SERVER[PHP_SELF]"); exit(); } ?> <HTML> <HEAD> </HEAD> <BODY> <?=$body?> </BODY> </HTML>
- 締切済み
- PHP
お礼
ご教授ありがとうございます。そうです。この通りです。 もう少し欲張りをいいますと，入力した後にまた消すと，また赤くなるということはできるのでしょうか。（このソースだと，キータイプすると変わるようになっていますね）