統計form表單資訊
阿新 • • 發佈：2018-12-10
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>Form的使用</title> </head> <body> <div> <form name="form1"> <table width="30%" align="center" border="1"> <tr align="center"> <td colspan="2">使用者資訊註冊</td> </tr> <tr> <td width="30%" align="right" ><label>真實姓名：</label></td> <td><input type="text" name="username" style="width: 95%" onfocus="if (this.value == '請輸入姓名') this.value = ''; " onblur="if (this.value == '') this.value = '請輸入姓名'; " value="請輸入姓名"></td> </tr> <tr> <td width="30%" align="right" ><label>密碼：</label></td> <td><input type="password" name="password" style="width: 95%" placeholder="請輸入密碼"></td> </tr> <tr> <td width="30%" align="right" ><label>使用者性別：</label></td> <td> <input type="radio" name="sex" value="M">男 <input type="radio" name="sex" value="F" checked="checked">女 </td> </tr> <tr> <td width="30%" align="right"><label>密碼保護提示：</label></td> <td> <select name="tips"> <option selected="selected">請選擇問題</option> <option >我的生日？</option> <option >印象深刻的小學班主任名字？</option> <option >最喜歡的水果？</option> <option >最喜歡的玩具？</option> <option >最擅長的遊戲？</option> </select> </td> </tr> <tr> <td width="30%" align="right" ><label>你所關注的話題：</label></td> <td > <input type="checkbox" name="hobby" value="數碼產品" checked="checked">數碼產品 <input type="checkbox" name="hobby" value="運動系列" >運動系列 <input type="checkbox" name="hobby" value="傢俱用品" >傢俱用品 <input type="checkbox" name="hobby" value="DIY" >DIY </td> </tr> <tr> <td colspan="2" align="center"> <a href="javascript:submitfrom();">提交</a> <!-- <button type="button" name="submit" onclick="javascript:submitfrom();">提交</button> --> <input type="reset" name="reset" value="清空"> </td> </tr> <tr> <td width="30%" align="right" ><label>使用者協議：</label></td> <td> <textarea readonly="readonly" rows="3" style="width: 95%"> 提示條款 您的信任對我們非常重要，我們深知使用者資訊保安的重要性，我們將按照法律法規要求，採取安全保護措施，保護您的使用者資訊保安可控。鑑此，阿里雲（或簡稱“我們”）制定本《法律宣告及隱私權政策》（以下或簡稱“宣告和政策”）並提醒您：在使用阿里雲網站的各項服務前，請您務必仔細閱讀並透徹理解本《法律宣告和隱私權政策》，在確認充分理解並同意後方使用相關產品和服務。一旦您開始使用阿里雲服務，將被視為對本宣告和政策內容的接受和認可。 如對本宣告和政策內容有任何疑問、意見或建議，您可通過阿里雲的工單、建議提交平臺（https://connect.aliyun.com/）或客服電話（95187）與我們聯絡。 </textarea> </td> </tr> </table> </form> </div> <div> <span > <textarea id="texta" readonly="readonly" style="height: 400px; width: 500px; " ></textarea> </span> </div> </body> <script type="text/javascript"> function submitfrom() { var _form = document.form1; var _username = _form.username.value, _password = _form.password.value, _sex = _form.sex, _sexValue = null; _tips = _form.tips.value, _hobby = _form.hobby; _hobbyValue = ""; document.getElementById("texta").value += "姓名：" + _username + "\n"; console.log("姓名：" + _username + "\n"); document.getElementById("texta").value += "密碼：" + _password + "\n"; console.log("密碼：" + _password + "\n"); for (var i = _sex.length - 1; i >= 0; i--) { if(_sex[i].checked) { _sexValue = _sex.value; break; } } document.getElementById("texta").value += "性別：" + _sexValue + "\n"; console.log("性別：" + _sexValue + "\n"); document.getElementById("texta").value += "提示問題：" + _tips + "\n"; console.log("提示問題：" + _tips + "\n"); for (var i = _hobby.length - 1; i >= 0; i--) { if(_hobby[i].checked) { _hobbyValue += (_hobby[i].value + "，"); } } document.getElementById("texta").value += "愛好：" + _hobbyValue + "\n"; console.log("愛好：" + _hobbyValue + "\n"); } </script> </html>