HTMLの入力フォームの判別について、Pythonを使ってWebページを作っている中で入力フォームの判別が必要になったため，この記事を書きました．今回は２種類のButtonについて判別を行います．

※ ローカルサーバの作成は Python or Dockerでローカルサーバををつくるもしくは，下のおまけを参考してください．

Button

ButtonはSubmitと異なり　．Submitはチェック処理関数の判定結果の戻り値を真偽値で返すようにし，その戻り値をForm要素のonsubmitイベントに指定します．戻り値がtrueならフォームは送信され，falseなら送信されません．
しかし，Buttonはonclickイベントでチェック処理関数をコールし，処理の判定によって関数内でsubmitメソッドをコールします．
また，method="post"を使ってポスト送信を行い，actionを使って送信先をしてします．
その結果を http://localhost:8000/cgi-bin/x.py に送信を行います．

a.py

import cgi,cgitb

html_body = u"""
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href='/data/stylesheet.css' rel='stylesheet' type='text/css' />
<title>選択</title>
</head>
<body>
<div class='box1'>
<header>
<h1>HTMLの入力フォームの判別</h1>
</header>

<h4>
<form action='http://localhost:8000/cgi-bin/x.py method="post">
  <input type="text" name="txt" />
  <input type="button" value="送信" onclick="return click(this.form)" /><!-- ボタン -->
</form>

<script>
function click(frm){
 if(frm.elements["txt"].value==""){
  alert("テキストボックスに入力してください");
 }else{
  /* submitメソッドでフォーム送信 */
  frm.submit();
 }
}
</script>

</div>
</body>
</html>
"""

form = cgi.FieldStorage()
txt = form.getvalue('txt')

print(html_body)

RadioButton

b.pyはA~Eの中から1つを選び， http://localhost:8000/cgi-bin/x.py に送信を行います．しかし，ユーザがA~Eの中から1つを選んでいるかどうかを判別しないと，選択されなくても次のページへ進みます．そのため，JavaScriptを使って，入力フォームの判別を行いたいと思います．

b.py

import cgi,cgitb

html_body = u"""
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href='/data/stylesheet.css' rel='stylesheet' type='text/css' />
<title>選択</title>
</head>
<body>
<div class='box1'>
<header>
<h1>HTMLの入力フォームの判別</h1>
</header>

<h4>
<form action='http://localhost:8000/cgi-bin/x.py' method='post'>
<ol>
<h2> A~Eを選んで入力してください： </h2>
<li><input type='radio' name='type1' value='1'>&nbspA</li>
<li><input type='radio' name='type1' value='2'>&nbspB</li>
<li><input type='radio' name='type1' value='3'>&nbspC</li>
<li><input type='radio' name='type1' value='4'>&nbspD</li>
<li><input type='radio' name='type1' value='5'>&nbspE</li>
<input type='submit' value='送信' />
</ol>
</form>
<script type="text/javascript" src="a.js"></script>
</h4>

</div>
</body>
</html>
"""

form = cgi.FieldStorage()
type1 = form.getvalue('type1')

print(html_body)

ラジオボタンに何かしらの選択がされているかを確認するポイントは，RadioButtonを1つずつ「true」か「false」をチェックし，そのすべてをチェックした後で，選択されていないかどうかを判断する必要があります．

これを踏まえてJavascript (b.js)を確認します．

「RadioButton.checked」と指定すると，チェックされていれば「true」をチェックしていない場合は「false」を返します．
これを利用してひとつずつRadioButtonを確認して、そのすべてが「false」だとアラートを出すという仕組みにしたいです．

b.js

function check(elem){
 var radios = elem.type1;
 var radiosFlag = new Boolean(false);
 for(var i=0; i<radios.length; i++){
  if(radios[i].checked == true){radiosFlag = true;}
 }
 if(radiosFlag == false){
  alert('タイプを選択しくてください');
  return false;
 }
 FormType1.submit();
}

このようにButtonおよびRadioButtonの入力フォームの判別および送信を行います．

おまけ

Web開発用おすすめエディター「Brakets」(http://brackets.io/)

HTML5入門(http://html5.cyberlab.info/elements/abc.html)

JavaScript入門サイト(http://www.pori2.net/js/)

みんなのPython Webアプリ編をHTMLで読めるようにしました(http://coreblog.org/ats/minpy-web-on-html/)