Posted By

bcmoney on 02/13/14


Tagged

form post xhtml upload client-to-server


Versions (?)

Strict xHTML FORMs for posting different data types to server


 / Published in: XHTML
 

URL: http://blog.lotusnotes.be/domino/archive/2007-09-05-xhtml-page-skeleton.html

For simplicity in processing regular FORMs, always give the form a name using the name attribute and use encoding type (enctype attritbute) of "x-www-form-urlencoded" for plaintext and typical form data such as lists, multiselects, text inputs...

Remember to do appropriate URL decoding as required on the server-side (most languages take care of this for you in native POST Parameter/Message body handling libraries).

See also: http://xhtml.com/en/xhtml/reference/input/

http://www.electrictoolbox.com/add-offsite-link-icon-after-external-links-css/

http://www.cs.tut.fi/~jkorpela/forms/file.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  4. <title>xHTML FORM examples</title>
  5. <!-- tech includes -->
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <style type="text/css">
  8. .external {
  9. background: url("http://www.electrictoolbox.com/images/external.png") no-repeat center right;
  10. padding-right: 13px;
  11. }
  12. </head>
  13. <div id="canvas">
  14. <h2>Basic Search box</h2>
  15. <!-- BASIC form (GET request to search result page) -->
  16. <form name="search" method="get" action="http://www.example.org/results">
  17. <legend>Search</legend>
  18. <label for="q">Keywords:</label>
  19. <input id="q" name="keywords" type="text" value="" size="20" maxlength="50" />
  20. <input type="submit" />
  21. </form>
  22. <br/>
  23. <hr/>
  24. <h2>Link handling without losing form data</h2>
  25. <a href="#register">INTERNAL LINK</a> | <a href="http://example.com" class="external">EXTERNAL LINK</a>
  26. <hr/>
  27. <h2>File Upload</h2>
  28. <!-- FILE UPLOAD form -->
  29. <form action="upload_file.php" method="post" enctype="multipart/form-data">
  30. <legend>File Upload</legend>
  31. <label for="file">Filename:</label>
  32. <input type="file" name="file" id="file" style="color:#f00; background:#ccc" /><br/>
  33. <input type="submit" name="upload" value="Upload" />
  34. </form>
  35. <br/>
  36. <hr/>
  37. <h2>Registration (multiple input types)</h2>
  38. <!-- TEXT form (POST for all xhtml input types shown) -->
  39. <form name="register" method="post" action="http://www.example.org/my-keywords" enctype="application/x-www-form-urlencoded">
  40. <legend>Personal information</legend>
  41. <label for="username">Username: </label>
  42. <input type="text" name="username" id="username" /><br />
  43. <label for="pwd">Password: </label>
  44. <input type="password" name="password" id="pwd" size="20" maxlength="20" />
  45. <label for="pwd">Confirm: </label>
  46. <input type="password" name="confirmpassword" id="conf_pwd" size="20" maxlength="20" title="Confirm your password by re-entering it here" /><br />
  47. <label for="firstname">First name: </label>
  48. <input type="text" name="firstname" id="firstname" /><br />
  49. <label for="lastname">Last name: </label>
  50. <input type="text" name="lastname" id="lastname" /><br />
  51. <label for="province">Province: </label>
  52. <select id="province" size="1" style="width:100px">
  53. <option value="AB">Alberta</option>
  54. <option value="BC">British Columbia</option>
  55. <option value="MB">Manitoba</option>
  56. <option value="NB">New Brunswick</option>
  57. <option value="NL">Newfoundland and Labrador</option>
  58. <option value="NS">Nova Scotia</option>
  59. <option value="ON">Ontario</option>
  60. <option value="PE">Prince Edward Island</option>
  61. <option value="QC">Quebec</option>
  62. <option value="SK">Saskatchewan</option>
  63. <option value="NT">Northwest Territories</option>
  64. <option value="NU">Nunavut</option>
  65. <option value="YT">Yukon</option>
  66. </select>
  67. <legend>Vaccination History</legend>
  68. <input name="history" type="checkbox" value="1" id="novaccines" />
  69. <label for="smallpox">No vaccinations</label><br />
  70. <input name="history" type="checkbox" value="2" id="smallpox" />
  71. <label for="smallpox">Smallpox</label><br />
  72. <input name="history" type="checkbox" value="3" id="mumps" />
  73. <label for="mumps">Mumps</label><br />
  74. <input name="history" type="checkbox" value="4" id="chickenpox" />
  75. <label for="chickenpox">Chicken Pox</label><br />
  76. <legend>Medical History</legend>
  77. <table border="0" cellpadding="3" cellspacing="0">
  78. <tr>
  79. <td>
  80. <select name="possibleSymptoms" size="9" multiple="multiple">
  81. <option value="1">Terminal Illness</option>
  82. <option value="2">Chronic Condition</option>
  83. <option value="3">Headache</option>
  84. <option value="4">Chest pains</option>
  85. <option value="5">Chest tightness</option>
  86. <option value="6">Stomache pains</option>
  87. <option value="7">Indigestion</option>
  88. <option value="8">Joint pains</option>
  89. <option value="9">Joint stiffness</option>
  90. <option value="10">Muscle pains</option>
  91. <option value="11">Muscle cramps</option>
  92. <option value="12">Cough</option>
  93. <option value="13">Sneezing</option>
  94. <option value="14">Runny Nose</option>
  95. <option value="15">Sore Throat</option>
  96. <option value="16">Itches</option>
  97. <option value="17">Skin Rash</option>
  98. </select>
  99. </td>
  100. <td align="center" valign="middle">
  101. <input type="Button" value="Add >>" style="width:100px" onClick="selectMoveRows(document.register.possibleSymptoms, document.register.symptoms)" />
  102. <br />
  103. <input type="Button" value="<< Remove" style="width:100px" onClick="selectMoveRows(document.register.symptoms, document.register.possibleSymptoms)" />
  104. </td>
  105. <td>
  106. <select name="symptoms" size="9" multiple="multiple">
  107. </select>
  108. </td>
  109. </tr>
  110. </table>
  111. <legend>Family Doctor</legend>
  112. <label>None <input type="radio" name="familydoctor" value="none" checked="checked" /></label><br />
  113. <label>Dr. A <input type="radio" name="familydoctor" value="dr_A" /></label><br />
  114. <label>Dr. B <input type="radio" name="familydoctor" value="dr_B" /></label><br />
  115. <label>Dr. C <input type="radio" name="familydoctor" value="dr_C" /></label><br />
  116. <label>Dr. D <input type="radio" name="familydoctor" value="dr_D" /></label><br />
  117. <label>Dr. E <input type="radio" name="familydoctor" value="dr_E" /></label><br />
  118. <label>Dr. F <input type="radio" name="familydoctor" value="dr_F" /></label><br />
  119. <p>
  120. <input type="submit" name="action" value="Register" />
  121. <input type="reset" value="Reset Form" />
  122. <input type="hidden" name="session" value="A398DF991" />
  123. </p>
  124. </form>
  125. </div>
  126. <script type="text/javascript">/* <![CDATA[ */
  127. window.onload = function() {
  128. var links = document.getElementsByTagName('a');
  129. for(i=0; i<links.length; i++) {
  130. if(links[i].className == 'external') {
  131. links[i].target = '_blank';
  132. }
  133. }
  134. };
  135.  
  136. function selectMoveRows(ss1, ss2) {
  137. var selID = '';
  138. var selText = '';
  139. // Move rows from ss1 to ss2 from bottom to top
  140. for (i=ss1.options.length - 1; i>=0; i--) {
  141. if (ss1.options[i].selected === true) {
  142. selID = ss1.options[i].value;
  143. selText = ss1.options[i].text;
  144. var newRow = new Option(selText, selID);
  145. ss2.options[ss2.length] = newRow;
  146. ss1.options[i] = null;
  147. }
  148. }
  149. selectSort(ss2);
  150. }
  151.  
  152. function selectSort(selList) {
  153. var id = '';
  154. var text='';
  155. for (x=0; x < selList.length - 1; x++) {
  156. for (y=x + 1; y < selList.length; y++) {
  157. if (selList[x].text > selList[y].text) {
  158. // Swap rows
  159. id = selList[x].value;
  160. text = selList[x].text;
  161. selList[x].value = selList[y].value;
  162. selList[x].text = selList[y].text;
  163. selList[y].value = id;
  164. selList[y].text = text;
  165. }
  166. }
  167. }
  168. }
  169. /* ]]> */</script>
  170. </body>
  171. </html>

Report this snippet  

You need to login to post a comment.