index.html
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>タイピングサイト</title> 6<link rel="stylesheet" href="home.css"> 7</head> 8<body> 9 10<div id="moji"> 11下記設定を選んでタイピング練習をしましょう! 12</div> 13<div id="container"> 14<form action="index.php" method="get"> 15 16 <div class="second"> 17 <p><input type="radio" name="second" value="30">30秒</p> 18 <p><input type="radio" name="second" value="60"checked>60秒</p> 19 <p><input type="radio" name="second" value="90">90秒</p> 20 <p><input type="radio" name="second" value="120">120秒</p> 21 </div> 22 <div class="method"> 23 <div><p><input type="radio" name="home" value="homePosition" checked>ホームポジションに戻る練習</p></div> 24 <div><p><input type="radio" name="home" value="normal">ノーマルで練習</p></div> 25 </div> 26 <div class="position"> 27 <p><input type="radio" name="position" value="tyuudann" checked>中段</p> 28 <p><input type="radio" name="position" value="joudann">上段</p> 29 <p><input type="radio" name="position" value="gedann">下段</p> 30 <p><input type="radio" name="position" value="hitosasiyubi">人差し指</p> 31 <p><input type="radio" name="position" value="all">全ポジション</p> 32 </div> 33 <p><input type="submit" value="送信"></p> 34 35</form> 36 37</div> 38</body> 39</html>
home.css
css
1.second { 2 width: 300px; 3 padding-left: 30px; 4 background-color: skyblue; 5} 6 7.position { 8 width: 300px; 9 padding-left: 30px; 10 background-color: pink; 11} 12 13.method { 14 width: 300px; 15 padding-left: 30px; 16 background-color: #ccc; 17} 18 19#container { 20 width: 300px; 21 margin: 0 auto; 22} 23 24#moji { 25 width: 300px; 26 margin: 0 auto; 27} 28
index.phpはjavascriptの部分一部だけ表示します。
php
1if(isset($_GET["home"]) && $_GET["home"]=="homePosition") { 2 ?> 3 fjs = "fj";//javascriptの関数の外で定義しています。 4 <?php 5 }elseif(isset($_GET["home"]) && $_GET["home"]=="normal") { 6 ?> 7 fjs = ""; 8 <?php 9 } 10 ?>
こちらはホームポジションに戻る練習のためにfjを挿入するかどうか決めています。
php
1time = <?php if(isset($_GET["second"])) {//timeもjavascriptの関数の外で定義しています。 2 echo $_GET["second"]; 3 }
こちらはtime30秒にするか60, 90, 120秒にするかを決めています。
php
1<?php if(isset($_GET["position"]) && $_GET["position"]=="tyuudann") { ?> 2 for(var i=0; i<100; i++) { 3 words.push(createPart("asdghkl"));//javascriptのコードです。 4 } 5 <?php } ?> 6 7 <?php if(isset($_GET["position"]) && $_GET["position"]=="joudann") { ?> 8 for(var i=0; i<100; i++) { 9 words.push(createPart("qwertyuiop"));//javascriptのコードです。 10 } 11 <?php } ?> 12 <?php if(isset($_GET["position"]) && $_GET["position"]=="gedann") { ?> 13 for(var i=0; i<100; i++) { 14 words.push(createPart("zxcvbnm,."));//javascriptのコードです。 15 } 16 <?php } ?> 17 18 <?php if(isset($_GET["position"]) && $_GET["position"]=="hitosasiyubi") { ?> 19 for(var i=0; i<100; i++) { 20 words.push(createPart("rvtgbyhnum"));//javascriptのコードです。 21 } 22 <?php } ?> 23 24 <?php if(isset($_GET["position"]) && $_GET["position"]=="all") { ?> 25 for(var i=0; i<100; i++) { 26 words.push(createPart("qwertyuiopasdghklzxcvbnm,."));//javascriptのコードです。 27 } 28 <?php } ?>
こちらは上中下段人差し指のどれを練習するかを決めています。
タイピングソフトを作っています。
上記のようにhtmlからフォームのラジオボタンのみを使って、index.htmlからindex.phpのscriptタグの中のjavascriptにphpのコードを挿入してフォームの値を渡しています。ちゃんと動くのですが、セキュリティ上問題はないでしょうか?phpはまだ素人です。分かりにくい質問で申し訳ないのですが、よろしくお願いします。
更新しましたが、まだ見にくいかと思います。申し訳ありません。
当方の目的はinput type="text" ではなくinput type="radio"でもセキュリティ上安全どうかを知りたいです。index.php貼ろうとしましたが文字数が超えて入力失敗しました。
回答1件
あなたの回答
tips
プレビュー