GUI for sentence alignment tasks

Can someone introduce me on how to write a simple web (HTML/XML) interface for a simple sentence alignment task?

The task is as follows:

The 1st line of the webpage would be the English sentence that will need to be matched to the chinese sentences below:

000325EN 开发者_StackOverflow社区   Whatever goes upon two legs is an enemy.

(checkbox)001054ZH  凡靠两条腿行走者皆为仇敌；
(checkbox)001055ZH  凡靠四肢行走者，或者长翅膀者，皆为亲友；
(checkbox)001056ZH  任何动物不得着衣；
(checkbox)001057ZH  任何动物不得卧床；
(checkbox)001058ZH  任何动物不得饮酒；
(checkbox)001059ZH  任何动物不得伤害其他动物；
(checkbox)001060ZH  所有动物一律平等。
(checkbox)Nil       No matching sentence

(submit button) (clear selection button)

The user should be able to click 1 or more of the check boxes. When the submit button is clicked the webpage will save a line in a appendable textfile in the format

SentID<\TAB>@English_sentence<<\TAB>SentID2<\TAB>=Chinese_sentence (e.g.:

000325EN    @Whatever goes upon two legs is an enemy.   001054ZH    =凡靠两条腿行走者皆为仇敌；

if there are more than 1 match to the English sentence, it may look like this

000325EN    @Whatever goes upon two legs is an enemy.   001054ZH    =凡靠两条腿行走者皆为仇敌；  001055ZH    =凡靠四肢行走者，或者长翅膀者，皆为亲友；

---

Depending on what should happen with the stored data, it indeed is possible to store them on the client, without any server-side scripting, see the HTML5 local storage facility: https://developer.mozilla.org/en/dom/storage (including example for degradation to cookies).

A good starting point for getting into locally stored data with HTML5 is http://diveintohtml5.ep.io/storage.html.

A simple example taken from http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx#_global and enhanced with localStorage detection from the link above:

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>

<script>
  function supports_html5_storage() {
    try {
      return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
      return false;
    }
  }

  if (supports_html5_storage()) {
    var storage = window.localStorage;
    if (!storage.pageLoadCount) storage.pageLoadCount = 0;
    storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
    document.getElementById('count').innerHTML = storage.pageLoadCount;
  }
  else {
    alert('No local storage available!');
  }
</script>

---

First of all....

The user should be able to click 1 or more radio buttons

Radio buttons were designed to only allow one button at a time selected. Perhaps you mean to use a checkbox instead?

the webpage will save a line in a appendable textfile

This is impossible to implement without using a server-side language (such as PHP, Ruby, Python, etc.).

Thirdly, you need to specify exactly what you want. What exactly is supposed to happen when the "submit button is clicked"? What do you mean by "sentence alignment"?