html:linkでリンククリック時に画面入力値を取得してアクションへ渡す方法

このQ&Aのポイント
  • Strutsを使用したログイン画面を作成しています。ID・パスワードを入力して、html:linkをクリックしてログインするという処理を行いたいです。
  • リンクをクリックした際にJSPに記述しているhtml:textとhtml:passwordの値を取得して、Actionへ渡し、その情報を元にDBへの問い合わせを行いたいのですが、html:linkで複数パラメータを渡す方法が分からないので教えていただきたいです。
  • JavaScriptのonclickイベントでサブミットさせる方法やMapを利用してパラメータを渡す方法を試しましたが、うまくいきませんでした。どのように実装すれば良いでしょうか?
回答を見る
  • ベストアンサー

html:linkでリンククリック時に画面入力値を取得してアクションへ渡す方法

Strutsを使用したログイン画面を作成しています。ID・パスワードを入力して、html:linkをクリックしてログインするという処理を行いたいです。 そこで、リンクをクリックした際にJSPに記述しているhtml:textとhtml:passwordの値を取得して、Actionへ渡し、その情報を元にDBへの問い合わせを行いたいのですが、html:linkで複数パラメータを渡す方法が分からないので教えていただきたいです。 過去質も参考にしてみましたが、今回の質問に的を得た内容がなかったので質問させていただきました。 参考にした方法 (1)JavaScriptのonclickイベントでサブミットさせる ⇒例えばdocument.form.submit();と書けそうだが,html:formにはname属性がないため、formの指定ができない?! (2)Mapを利用してパラメータを渡す ⇒JSP内にMap設定のロジックを書く。Map(name,value)の形式で、value部分(画面入力値)はどうやって取得するのか分からない。 【struts-config】 <action-mappings> <action path="/login_Anken" type="action.Login_Anken_Action" name="login_Anken_Form" validate="true" input="/pages/Login_Anken.jsp" scope="request"> <forward name="success" path="/pages/MainMenu.jsp"/> <forward name="fail" path="/pages/Login_Anken.jsp"/> </action> 【Login_Anken.jsp】 <html:form action="/login_Anken" > <table border="0" width="100%" > <tr> <td class="pname" colspan="4" > ****システム </td> </tr> <tr> <td colspan="4"> <hr size="5" width="100%" noshade> </td> </tr> <tr> <td class="gname" colspan="4" > ログイン </td> </tr> <tr> <td colspan="4" > <hr size="5" width="100%" noshade> </td> </tr> <tr> <td width="25%" >&nbsp; </td> <td class="login"> ユーザID </td> <td width="20%""> <html:text property="userId"/> </td> <td width="20%">&nbsp; </td> </tr> <tr> <td width="25%" >&nbsp; </td> <td class="login"> パスワード </td> <td width="20%""> <html:password property="password" /> </td> <td width="20%">&nbsp; </td> </tr> <tr> <td width="10%" align="center" colspan="4" > <html:link action="/login_Anken" name="map">ログイン </html:link> </td> </tr> </table> </html:form> 【Login_Anken_Action.java】 public class Login_Anken_Action extends Action { public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { ActionMessages errors = new ActionMessages(); //画面入力値を取得 Login_Anken_Form loginAnkenForm = (Login_Anken_Form) form; boolean isSuccess = false; Login_Anken_Business business = new Login_Anken_Business(); String userName = null; userName = business.getLoginUserName (loginAnkenForm.getUserId(), loginAnkenForm.getPassword()); //ユーザが存在すればログインOK isSuccess = (userName != null); if (isSuccess) { //TODO HttpSession session = request.getSession(); session.setAttribute("name", userName); return mapping.findForward("success"); } else { errors.add(ActionMessages.GLOBAL_MESSAGE, new ActionMessage("errors.login")); saveErrors(request, errors); return mapping.findForward("fail"); } } }

  • Java
  • 回答数4
  • ありがとう数1

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

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

ああ このHTML見て一目でわかったわ。 <a href="~" のhrefにリクエストが飛んでいるだけね。 <a href="javascript:return false" <a href="#" とかにしないとonclickが正常に働かないわよ。

kouji1351
質問者

お礼

ありがとうございます! html:link href="#" としたところ、無事ログインに成功することができ、画面も遷移しました。href="#"としないとJavascriptが動作しないのは、変更前はJSP上でhtml:link action="~"となっており、リンククリック時はリンクタグのアクションへリクエストが飛んでしまい、フォームタグがサブミットされない(onclickイベントが動作しない)という理解で良いのですよね。

その他の回答 (3)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.4

正確には どっちのイベントも発行される だわ。 今回の場合は先にパラメータのないほうが実行されたため そこでエラーになって終わってしまったのね。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

> Formの値(画面入力値)が取得できていないようです いくつか原因が考えられるわ。 まずは、生成されたあとのHTMLを見なさい 1.formタグが複数ある  [0]は1つ目のformタグの範囲だから、その範囲内に何もなければ何も送信されない  [1]とかやってみるのもひとつの手ね 2.html:formのmethodをgetにしてやってみて   リクエストURLに送信パラメータがぞろぞろつけばOK   ~/login_Anken?userId=xxxx&password=xxx   こんな感じね。   つかない場合はsubmit()対象のformタグが間違っている可能性大よ   ついているのに取得できないのならFormクラスの定義が間違っているのかもね

kouji1351
質問者

補足

リクエストURLはhtt★://loalhost:8080/app/login_Anken.doとなっており、パラメータは付いてないです。以下が生成されたHTMLですが、formタグに特におかしい箇所はない気がするのですが・・・。 <html> <head> <link rel="stylesheet" href="/app/css/styles.css" type="text/css" /> <title>ログイン画面</title> </head> <body> <table border="0" width="100%" > <form name="login_Anken_Form" method="GET" action="/app/login_Anken.do"> <tr> <td class="pname" colspan="4" > ****システム </td> </tr> <tr> <td colspan="4"> <hr size="5" width="100%" noshade> </td> </tr> <tr> <td class="gname" colspan="4" > ログイン </td> </tr> <tr> <td colspan="4" > <hr size="5" width="100%" noshade> </td> </tr> <tr> <td width="25%" >&nbsp; </td> <td class="login"> ユーザID </td> <td width="20%" > <input type="text" name="userId" maxlength="10" size="20" value="" style="width:100px; height=20px; font-size:10pt;" class="ime_disabled"> </td> <td width="20%" >&nbsp; </td> </tr> <tr> <td width="25%" >&nbsp; </td> <td class="login"> パスワード </td> <td width="20%" > <input type="password" name="password" maxlength="10" size="20" value="" style="width:100px; height=20px; font-size:10pt;" class="ime_disabled"> </td> <td width="20%" >&nbsp; </td> </tr> <tr> <td width="10%" align="center" colspan="4" > <a href="/app/login_Anken.do" style="font-size:10pt;" onclick="document.forms[0].submit();">ログイン</a> </td> </tr> </form> </table> </body> </html>

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

document.forms[0].submit()

kouji1351
質問者

補足

ありがとうございます。 html:linkのonclickイベントにdocument.forms[0].submit()と書いてみましたが、処理自体はActionへ渡っているようですが、Formの値(画面入力値)が取得できていないようです。リンクのクリックは検知できたけど、サブミットはされていないということなんでしょうか?

関連するQ&A

  • HTTP 404 error

    Vine Linux,Tomcat5で (1)webapps/conf/server.xml ... <HOST> <Context path="/apress" docBase="apress" debug="0" reloadable="true" /> ... (2)webbapps/apress/login.jsp ... <table width="500" border="0" cellspacing="0" cellpadding="0"> <form name="loginForm" method="post" action="servlet/chapter2.login"> <tr><td width="402"><div align="right">User Name: </div></td> <td width="399"><input type="text" name="username"></td> </tr> ... (3)webapps/apress/WEB-INF/web.xml ... <servlet> <servlet-name>login</servlet-name> <servlet-class>chapter2.login</servlet-class> </servlet> <servlet-mapping> <servlet-name>login</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping> ... (4)webapps/apress/WEB-INF/classes/chapter2/login.java package chapter2; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import java.util.*; public class login extends HttpServlet { private String target = "/welcome.jsp"; private String getUser(String username, String password) { // Just return a statice name // If this was reality, we would perform a SQL lookup return "Bob"; } .... (4)現象: http://xxx.xxx.xxx.xxxx:8080/apress/login.jsp でsubmit action 後、次のエラーが出てきました: HTTP 404 error, The requested resource (/apress/servlet/chapter2.login) is not available. この問題はどこにあるでしょうか教えてください。

  • webbrowserでクリック(リンク)させたいのですが・・・

    Webbrowserを使用して、IEを動かしたいです。 下のようなページで”いいいい”(一番下)をリンクさせたいのですがうまくいきません。 どこが悪いのか教えて頂けないでしょうか? ※投稿文字数に制限があり大幅に削除しました。これで分かるでしょうか? <td align="right"> <a href="/bsite/member/menu.do">トップ</a>&nbsp;<b><font color="#999999">│</font></b>&nbsp;<a href="/bsite/member/logout.do">ログアウト</a> <a href="/bsite/price/search.do" class="wlink"><div style="margin:2 0 1 0;">紹介</div></a> <a href="/bsite/member/portfolio/registeredStockList.do" class="wlink"><div style="margin:2 0 1 0;">名前</div></a> <a href="/bsite/member/acc/menu.do" class="wlink"><div style="margin:2 0 1 0;">甲</div></a> <a href="/bsite/market/menu.do" class="wlink"><div style="margin:2 0 1 0;">情</div></a> <div class="titletext">報</div> <!--▼xxxxー--> <table border="0"> <tr valign="top"> <td><b>1111&nbsp;てつ</b></td> <form action="/bsite/member/portfolio/stockDetail.do" method="POST"> <input type="hidden" name="product_code" value="1111"><input type="submit" value="のぼる"> <form action="/bsite/price/stockDetail.do" method="POST"> <input type="hidden" name="atime" value="1225641591930"> <input type="hidden" name="ipm_product_code" value="0000"> <input type="hidden" name="market" value="TKY"> た*&nbsp;<a href="/bsite/price/stockDetail.do?ipm_product_code=5423&market=JNX">PTS</a>&nbsp;&nbsp;&nbsp;<input type="submit" value="あたらしい"> </table> <!--▲登ー--> <table border="0"> <tr valign="top"> <td nowrap><font class="ltext"></td> </tr> </table> <table border="0" "> <tr bgcolor="#b7b7b7">></td></tr> <tr valign="top"> <td nowrap bgcolor=" <td nowrap align=" <tr bgcolor="#b7b7b7"><td colspan="4"><img src="/bsite/img/trans.gif" width="1" height="1" alt=""></td></tr> </table>         <br> <!--▼き--> <table <tr><td bgcolor= <table <tr><td <table "> <tr align="center"> <td 奇数</td> </tr> </table> </table> </td></tr> </table> <br> <!--参考--> <!-- kim --> <table > <tr><td > <table > </table> </td></tr> </table> <br> <!--▲き--> <table border=> <td bgcolor="#eeeeee"> <a href="/bsite/price/marginDetail.do?ipm_product_code=5423&market=TKY" class="wlink">情</a> </td> </tr> </table> <table "></table> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <a href="/bsite/member/stock/buyOrderEntry.do?ipm_product_code=5423" class="wlink">現か</a> </td> <td width="1%"><img src="/bsite/img/trans.gif" width="1" height="1" border="0"></td> <td width="49%" bgcolor="#DEECFA"> <a href="/bsite/member/stock/sellOrderEntry.do?ipm_product_code=5423" class="wlink">なかう</a> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:4px;"> <tr align="center"> <td width="30%" bgcolor="#FFE6D7"> <a href="/bsite/member/margin/buyOrderEntry.do?ipm_product_code=5423" class="wlink">いいいい</a> </td> 自分の考えでは↓なのですが・・・ どなたか教えてください。宜しくお願い致します。 kchk2 = UserForm3.web1.Document.Links(10).innerText If kchk2 <> "いいいい" Then MsgBox "ハイパーリンク「いいいい」の選択に失敗しました。" Exit Sub End If enchk = 0 UserForm3.web1.Document.Links(10).Click

  • PHPコード表示について

    PHPコードが下記になっています。 文字バケを正常に表示させる方法を教えてください。 <!-- login-box[start] --> <div id="login"> <?php if (isset($_SESSION['sLoginID'])) { ?> <form action="mem_logout.php" method="post"> <table> <tr> <td>。。<font color="#6699ff" size="3">「」 <b>イ餔ホノー</b></font></td> </tr> <tr> <td>。。<?php echo htmlspecialchars($_SESSION['sNickname']); ?>、オ、・/td> </tr> <tr> <td class="sp02"><div id="login_right">・愠ー・、・鹵讀ヌ、ケ。」</div></td> </tr> <tr> <td class="sp02"><div id="login_right"><input type="submit" value="・愠ー・「・ヲ・ネ" /></div></td> </tr> </table> <input type="hidden" name="fLoginID" value="dummy" /> <input type="hidden" name="fPassword" value="dummy" /> </form> <?php } else { ?> <form name="login" action="http://www.haradagr-dp.co.jp/test/mem_check.php" method="post" onsubmit="return loginCheck()"> <input type="hidden" name="fTarget" value="<?php echo $ftarget; ?>"> <table> <tr> <td colspan="2">。。<font color="#6699ff" size="3">「」 <b>イ餔ホノー</b></font></td> </tr> <tr> <td colspan="2" align="center">、ェサ釥キエ・ヨテ讀ヌ、ケ。」<br> ID。ァtestid<br> ・ム・ケ・・シ・ノ。ァtest1234</td> </tr> <tr> <td width="80" valign="bottom" class="login_bold"> ID </td> <td valign="bottom" class="sp02"><div id="login_input"><input type="text" name="fLoginID" size="16" maxlength="16"></div></td> </tr> <tr> <td width="80" valign="bottom" class="login_bold">・ム・ケ・・シ・ノ </td> <td valign="bottom" class="sp02"><div id="login_input"><input type="password" name="fPassword" size="16" maxlength="16"></div></td> </tr> <tr> <td colspan="2" class="sp02"><div id="login_right"><input type="image" src="image/log_in.gif" alt="・愠ー・、・・ width="100" height="20" border="0"></div></td> </tr> <tr> <td colspan="2"><div id="login_right"><font size="1" color="#ea5550">「ィ・ッ・テ・ュ。シ、鰺ュク妤ヒ、キ、ニ、ッ、タ、オ、、。」</font></div></td> </tr> </table> </form> <?php } ?> </div> <!-- login-box[end] --> <br> <div class="links" align="center"> <a href="http://www.haradagr-dp.co.jp/okusuri-navi/sodan.html" target="_blank"><img src="image/bullet250.gif" width="133" height="46" border="0"></a><br> 「ャ「ャ「ャ<br> 、ェフ・フ、マ、ウ、チ、鬢ォ、・/div> <br>

    • ベストアンサー
    • PHP
  • Java Struts ~に対するゲッターメソッドがありません

    Java Struts WindowsXp Java Struts共に初心者です。 上記を使用してログイン画面を作成しています。 エラーが発生しているのですが 「Bean LoginFrm のプロパティ id に対するゲッターメソッドがありません」 と言われます。 参考サイトはいくつもあるのですが、そもそもイテレータを使用していないとか私の状況に一致する回答を見つけることができませんでした。 (JAVA、Struts共に慣れていないためか応用がきかないみたいです) loginTop.jsp login.jsp LoginFrm.java LoginAct.java struts-config.xml のいずれかが原因だとは思うのですが、そのどこかが皆目見当もつきません。 loginTop.jsp----------------------------- <html:form action="/login"> <table border="0"> <tr><td> ログインID<html:text name="LoginFrm" property="id" size="6" maxlength="5" /> </td></tr> <tr><td> パスワード<html:password name="LoginFrm" property="pass" size="6" maxlength="5" /> </td></tr> </table> </html:form> login.jsp---------------------- <html:form action="/login"> <table border="0"> <tr><td> A:<bean:write name="LoginFrm" property="id" /> </td></tr> <tr><td> B:<bean:write name="LoginFrm" property="pass" /> </td></tr> </table> </html:form> LoginFrm.java---------------------- private String id; private String pass; public String getID() { return id; } public void setID(String id) { this.id = id; } public String getPass() { return pass; } public void setPass(String pass) { this.pass = pass; } LoginAct.java-------------------- throws Exception { request.setCharacterEncoding("Windows-31J"); LoginFrm logFrm = (LoginFrm) form; log.info(" user = "+logFrm.getID()); log.info(" user = "+logFrm.getPass()); return mapping.findForward("login"); } struts-config.xml--------------------------- <form-beans> <form-bean name="LoginFrm" type="loginForm.LoginFrm" /> </form-beans> ~ <action attribute="LoginFrm" input="/pages/loginTop.jsp" name="LoginFrm" path="/login" type="loginAction.LoginAct" scope="request" validate="true"> <forward name="login" path="/pages/login.jsp" /> </action> 以上です。 かなり長くなり申し訳ありません。

    • ベストアンサー
    • Java
  • VBAでWebページに入力&ボタンクリック

    URLがhttp://xxx.com/のページで次のようなフォームのときExcelで自動入力クリックするマクロを作りたいです。 <input type="hidden" name="room" value="aaaaa"/> <a name="regist" id="regist">総登録数</a> <table width="402" border="1"> <tr> <th align="center" colspan="2"><div align="left"><big>登録ページ</big></div></th> </tr> <tr> <td colspan="2">&nbsp;&nbsp;&nbsp;name <input type="text" size="20" name="name" value="" maxlength="20"> &nbsp;&nbsp;&nbsp;Email <input type="text" size="20" name="email" value=""> &nbsp;&nbsp;</td> </tr> <tr> <td align="center">pass</td> <td><input type="text" size="20" name="pw" maxlength="12" value=""></td> </tr> <tr> <td align="center">category</td> <td><select size="1" name="junle"> <option value="pp" selected="selected">カテゴリ選択</option> <option value="0">その1</option> <option value="1">その2</option> </select></td> </tr> <tr> <td align="center">title</td> <td><input type="text" size="55" name="title" maxlength="25" value=""></td> </tr> <tr> <td align="center">URL</td> <td><input type="text" size="55" name="url"></td> </tr> <tr> <td align="center">intro</td> <td><input type="text" name="comment" size="55" maxlength="50" value=""></td> </tr> <tr align="center"> <td><br></td> <td><input type="submit" name="mode" value="登録"> <input type="reset" value="クリア"></td> </tr> </table> 入力する内容は1行目のA,B,C・・にname,email,pass・・・が順番にそれぞれ入っています。

  • background-color css

    目的:社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

  • ★画面からの値の取得方法について★

    下記のようなソフトをJAVAで作ろうと考えているのですが、 画面から値を取得する方法が思い浮かびません。 http://www.ne.jp/asahi/mochiyama/my/ 例として、下記ページの日経平均の値を取得したいのですが、 皆さんならどのように取得されますでしょうか? https://newtrading.etrade.ne.jp/ETGate/?_ControlID=WPLETmkR001Control&_PageID=DefaultPID&_DataStoreID=DSWPLETmkR001Control&_ActionID=DefaultAID&getFlg=on 下記はページのソースデータです。 <!--日経平均--> <td width="120" bgcolor="#ffffff"> <table border="0" cellspacing="0" cellpadding="1" width="100%"> <tr> <td class="mtext" nowrap>日経平均</td> <td class="mtext" align="right" nowrap>17,419.20</td> </tr> <tr> <td class="mtext" nowrap>16:00</td> <td class="mtext" align="right" colspan="2" nowrap>&nbsp;<font color="red"><img src="//a248.e.akamai.net/f/248/29350/7d/pict.etrade.ne.jp/v2/images/common/common/i_up_red.gif">&nbsp;256.00</font></td> </tr> </table> </td> <!--日経平均--> たくさんのご意見をお待ちしております。 それでは、よろしくお願い致します。

    • ベストアンサー
    • Java
  • JavaScriptでIEの自動ログインについて

    JavaScriptの初心者でIE上で表示されたログインボタンをクリックしたいのですが、name="ボタン名"がなくクリックできないんです。 「ie.document.MainForm(0).submit.click();」と記入してみたのですが、クリックできないんです。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか? どなたかすいませんがご教授ください。 ===================================================== ボタンのHTML <form name="MainForm" method="POST" action="/login" target="_self"> <table border="0" width="510"> <tr> <td width="140">&nbsp;</td> <td width="160" align="center"><input type="submit" style="width:100" value="ログイン" onClick="return buttonHandler('ok');"></td> <td width="210">&nbsp;</td> </tr> </table> <br> </form>

  • safariで特定条件下でデーブル幅が効かなくなります

    safariでcolspanでセルを結合し、その中に大きい要素(下の例ですとwidth500pxの画像や、文字数60のテキスト領域)を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC">&nbsp;</td> </tr> </table>

    • ベストアンサー
    • HTML
  • <table width="95%" border="1">

    <table width="95%" border="1"> <tr> <td colspan="3"><div align="right">label :</div></td> <td>&nbsp;</td> <td colspan="3">label</td> <td>&nbsp;</td> <td colspan="3">label :</td> <td colspan="6"></td> <td colspan="4">label :</td> <td colspan="4"></td> <td>&nbsp;</td> <td colspan="2">label :</td> <td colspan="11"> </td> <td>&nbsp;</td> </tr> <tr> <td><div align="right">label</div></td> <td>&nbsp;</td> <td colspan="3"></td> <td>&nbsp;</td> <td colspan="3">label</td> <td colspan="4"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td colspan="2"><label> <input type="checkbox" name="checkbox" value="checkbox" /> </label> </td> <td colspan="22">&nbsp;</td> </tr> <tr> <td><div align="right">label</div></td> <td>&nbsp;</td> <td colspan="12"> <input type="text" name="textfield3" value="" /> </td> <td>&nbsp;</td> <td>&nbsp;</td> <td colspan="2">label</td> <td>&nbsp;</td> <td colspan="6"></td> <td colspan="2">label</td> <td colspan="5"></td> <td colspan="8">&nbsp;</td> </tr> <tr> <td><div align="right">label</div></td> <td>&nbsp;</td> <td colspan="12"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td colspan="2">label</td> <td>&nbsp;</td> <td colspan="6"></td> <td colspan="2">label</td> <td colspan="5"></td> <td colspan="8">&nbsp;</td> </tr> <tr> <td><div align="right">label</div></td> <td>&nbsp;</td> <td colspan="19"></td> <td>&nbsp;</td> <td colspan="2">label</td> <td colspan="12"></td> <td colspan="4">&nbsp;</td> </tr>

専門家に質問してみよう