Основы работы с XHTML и CSS
элементы управления формы
| <form id="formId" action="url" method="get|post" Исключены: name="formname" > ... элементы управления формы </form> |
| Листинг 11.1. Общая форма тега <form> |
| Закрыть окно |
| <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Страница формы </title> </head> <body> <form action="url"> ...элементы управления формы </form> </body> </html> |
| Листинг 11.2. Общая компоновка страницы для формы |
| Закрыть окно |
| <!-- Сценарий браузера --> <script type="text/javascript"> function Get_Name() { var Input = document.getElementById("Name") var Output = document.getElementById("Output") Output.innerHTML = "Your name is <b>" + Input.value + "</b>." } </script> <!-- Код XHTML --> <div> Enter your name: <input id="Name" type="text"/> <input type="button" value="Submit" onclick="Get_Name()"/><br/> <span id="Output" style="color:red"></span> </div> |
| Листинг 11.3. Код сценария на странице для обработки введенных данных |
| Закрыть окно |
| <input type="text|password" id="id" size="n" maxlength="n" value="text" Исключен: name="name" /> |
| Листинг 11.4. Общий формат тега <input type="text|password"/> |
| Закрыть окно |
| <form action="ThisPage.htm"> <p>Please enter the following information:</p> <table> <tr> <td>Name: </td> <td><input id="TheName" type="text"/></td> </tr> <tr> <td>Password: </td> <td><input id="ThePassword" type="password"/></td> </tr> </table> </form> |
| Листинг 11.5. Код для вывода различных вариантов тега <input type="text|password"/> |
| Закрыть окно |
| <form action="ThisPage.htm"> <table> <tr> <td>City: </td> <td><input type="text" id="City" size="15"/></td> <tr> <tr> <td>State: </td> <td><input type="text" id="State" size="2"/></td> <tr> <td>Zip: </td> <td><input type="text" id="Zip" size="10"/></td> </tr> </table> </form> |
| Листинг 11.6. Код задания выводимых размеров управляющих элементов textbox |
| Закрыть окно |
| <form action="ThisPage.htm"> <table> <tr> <td>City: </td> <td><input type="text" id="City" size="15" maxlength="15"/></td> <tr> <tr> <td>State: </td> <td><input type="text" id="State" size="2" maxlength="2"/></td> <tr> <td>Zip: </td> <td><input type="text" id="Zip" size="10" maxlength="10"/></td> </tr> </table> </form> |
| Листинг 11.7. Код для задания максимального количества символов, вводимых в элементах управления textbox |
| Закрыть окно |
| Name: <input type="text" id="FullName" size="30" value="Enter your full name here"/> |
| Листинг 11.8. Код предварительно заполненного элемента управления textbox |
| Закрыть окно |
| <input id="QuoteText" type="text" size="45" value="Here is a "quotation" appearing in the textbox."/> |
| Листинг 11.9. Неверное предварительное заполнение textbox содержимым с кавычками |
| Закрыть окно |
| <input id="QuoteText" type="text" size="45" value="Here is a "quotation" appearing in the textbox."/> |
| Листинг 11.10. Действительное предварительное заполнение textbox содержимым с кавычками |
| Закрыть окно |
| <style type="text/css"> .textbox {width:200px; font-family:comic sans ms; font-size:10pt; background-color:#F0F0F0; color:#0000FF; border:ridge 5px} </style> Name: <input type="text" id="FullName" class="textbox" maxlength="20" value="Enter your full name here"/> |
| Листинг 11.11. Код для оформления элемента управления textbox |
| Закрыть окно |
| <textarea id="id" cols="n" rows="n" > ...предварительно введенный текст </textarea> |
| Листинг 11.12. Общая форма элемента управления <textarea> |
| Закрыть окно |
| <textarea id="MyTextarea" cols="50" rows="6"> These are two paragraphs appearing inside a textarea. This content, with line breaks and blank lines coded in the editor for for readability, is exactly reproduced within the textarea. </textarea> |
| Листинг 11.13. Кодирование textarea с фиксированными пробелами и переносами строк |
| Закрыть окно |
| <textarea id="MyTextarea" cols="50" rows="6"> These are two word-wrapped paragraphs appearing in a textarea. This content, without extra line breaks or blank lines coded in the editor, is properly word-wrapped inside the textarea as intended. </textarea> |
| Листинг 11.14. Кодирование текстовой области для содержимого с переносом слов |
| Закрыть окно |
| <textarea id="TagInput" cols="40" rows="6"> The <p> tag appears around a block of text to offset it from surrounding text by blank lines. A <div> tag, in contrast, does not produce blank lines surrounding its content. </textarea> |
| Листинг 11.15. Кодирование текстовой области с тегами XHTML |
| Закрыть окно |
| <style type="text/css"> textarea {style="border:inset 5; background-color:#F0F0F0; color:#0000FF; font-family:comic sans ms; font-size:10pt; padding:7px} </style> <textarea id="Comments" cols="50" rows="4"> This control is styled with 10-point Comic Sans MS type face with gray background and blue foreground colors. The border is inset style, five pixels in width. Padding of 7 pixels appears around the text. </textarea> |
| Листинг 11.16. Кодирование оформления текстовой области |
| Закрыть окно |
| <input type="radio" id="id" name="name" value="text" checked="checked" /> |
| Листинг 11.17. Общая форма тега <input type="radio"/> |
| Закрыть окно |
| <input type="radio" name="Choice"/>Choice 1<br/> <input type="radio" name="Choice"/>Choice 2<br/> <input type="radio" name="Choice"/>Choice 3<br/> |
| Листинг 11.18. Кодирование группы радио кнопок |
| Закрыть окно |
| What is your favorite color?<br/> <input type="radio" name="Color" value="Red"/>Red<br/> <input type="radio" name="Color" value="Green"/>Green<br/> <input type="radio" name="Color" value="Blue"/>Blue<br/> |
| Листинг 11.19. Код множества кнопок для выбора цвета |
| Закрыть окно |
| What is your favorite color?<br/> <input type="radio" name="Color" value="R"/>Red<br/> <input type="radio" name="Color" value="G"/>Green<br/> <input type="radio" name="Color" value="B"/>Blue<br/> |
| Листинг 11.20. Код для множества, создающий "кодированный" выбор цвета |
| Закрыть окно |
| What is your favorite color?<br/> <input type="radio" name="Color" value="R" checked="checked"/>Red<br/> <input type="radio" name="Color" value="G"/>Green<br/> <input type="radio" name="Color" value="B"/>Blue<br/> |
| Листинг 11.21. Код для предварительного выбора кнопки |
| Закрыть окно |
| <input type="checkbox" id="id" name="name" value="text" checked="checked" /> |
| Листинг 11.22. Общий формат тега <input type="checkbox"/> |
| Закрыть окно |
| What are your favorite colors?<br/> <input type="checkbox" name="Color1" value="R"/>Red<br/> <input type="checkbox" name="Color2" value="G"/>Green<br/> <input type="checkbox" name="Color3" value="B"/>Blue<br/> <input type="checkbox" name="Color4" value="Y"/>Yellow<br/> <input type="checkbox" name="Color5" value="M"/>Maroon<br/> <input type="checkbox" name="Color6" value="P"/>Purple<br/> <input type="checkbox" name="Color7" value="A"/>Aqua<<br/> <input type="checkbox" name="Color8" value="T"/>Teal<br/> |
| Листинг 11.23. Код множества флажков |
| Закрыть окно |
| <select id="id" name="name" size="n" multiple="multiple" > <option value="text" selected="selected" > Label </option> ... </select> |
| Листинг 11.24. Общая форма тегов <select> и <option> |
| Закрыть окно |
| Choose your favorite color:<br/> <select id="Color"> <option value="R">Red</option> <option value="G">Green</option> <option value="B">Blue</option> <option value="Y">Yellow</option> <option value="M">Maroon</option> <option value="P">Purple</option> <option value="A">Aqua</option> <option value="T">Teal</option> </select> |
| Листинг 11.25. Базовый код для раскрывающегося списка |
| Закрыть окно |
| <input type="submit" id="id" name="name" value="text" /> |
| Листинг 11.26. Общая форма кнопки <input type="submit"/> |
| Закрыть окно |
| <input type="image" id="id" name="name" src="url" alt="text" /> |
| Листинг 11.27. Общая форма кнопки <input type="image"/> |
| Закрыть окно |
| <style type="text/css"> .submit {width:150px; background-color:#4682B4; color:#FFFFFF; font-family:times new roman; font-size:14pt} .reset {width:150px; background-color:#4682B4; color:#FFFFFF; font-family:times new roman; font-size:14pt} </style> <input type="submit" name="SubmitButton" value="Submit Form" class="submit"/> <input type="reset" name="ResetButton" value="Reset Form" class="reset"/> |
| Листинг 11.28. Код оформления кнопок формы submit и reset |
| Закрыть окно |
| <input type="button" id="id" name="name" value="text" [onclick="script"] /> |
| Листинг 11.29. Общая форма тега <input type="button"/> |
| Закрыть окно |
| <input id="Button1" type="button" value="Hilite Me" onclick="this.style.color='white'; this.style.backgroundColor='red'; document.getElementById('Button2').style.color=''; document.getElementById('Button2').style.backgroundColor=''"/> <input id="Button2" type="button" value="Hilite Me" onclick="this.style.color='white'; this.style.backgroundColor='red'; document.getElementById('Button1').style.color=''; document.getElementById('Button1').style.backgroundColor=''"/> |
| Листинг 11.30. Код для оформления и программирования тега <input type="button"/> |
| Закрыть окно |
| <button type="submit|reset|button" id="id" name="name" [onclick="script"] > ...текст и теги XHTML </button> |
| Листинг 11.31. Общая форма тега <button> |
| Закрыть окно |
| <style type="text/css"> button {float:left; height:100px; width:180px; border:outset 3px; margin-right:10px} span#Title {font-family:impact; font-size:14pt; color:#DAA520} span#Text {font-family:verdana; font-size:10pt} img {width:50px; height:39px} iframe {width:225px; height:185px; border:outset 10; margin-right:65px} </style> <button type="button" onclick=" if (document.getElementById('Text').innerText == 'View Picture') { document.getElementById('Picture').src='W-Colossus.gif' document.getElementById('Text').innerText='Hide Picture' } else if (document.getElementById('Text').innerText == 'Hide Picture') { document.getElementById('Picture').src='' document.getElementById('Text').innerText='View Picture' }" > <span id="Title">Colassus of Rhodes</span><br/> <img src="T-Colossus.gif" alt=" View Colossus of Rhodes"/><br/> <span id="Text">View Picture</span> </button> <iframe id="Picture" scrolling="no"></iframe> |
| Листинг 11.32. Код для оформления и программирования тега <button> |
| Закрыть окно |
| <fieldset> <legend>text</legend> ... элементы управления формы </fieldset> |
| Листинг 11.33. Общая форма тегов <fieldset> и <legend> |
| Закрыть окно |
| <style type="text/css"> fieldset {width:180px; vertical-align:top} legend {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue} </style> <div> <-- Блочный контейнер для всех fieldset --> <fieldset> <legend>Radio Buttons:</legend> <input type="radio" name="Radio"/>First Button<br/> <input type="radio" name="Radio"/>Second Button<br/> <input type="radio" name="Radio"/>Third Button<br/> </fieldset> <fieldset> <legend>Checkboxes:</legend> <input type="checkbox" name="Box1"/>First Checkbox<br/> <input type="checkbox" name="Box2"/>Second Checkbox<br/> <input type="checkbox" name="Box3"/>Third Checkbox<br/> <input type="checkbox" name="Box4"/>Fourth Checkbox<br/> <input type="checkbox" name="Box5"/>Fifth Checkbox<br/> </fieldset> <fieldset> <legend>Selection List:</legend> <select size="5"> <option>First Option</option> <option>Second Option</option> <option>Third Option</option> <option>Fourth Option</option> <option>Fifth Option</option> <option>Sixth Option</option> <option>Seventh Option</option> </select> </fieldset> </div> |
| Листинг 11.34. Код для объединения элементов управления в группы с заголовками |
| Закрыть окно |
| <div> <fieldset> <legend>Reversed Tab Order:</legend> 1. <input type="text" tabindex="5"/><br/> 2. <input type="text" tabindex="4"/><br/> 3. <input type="text" tabindex="3"/><br/> 4. <input type="text" tabindex="2"/><br/> 5. <input type="text" tabindex="1"/><br/> </fieldset> </div> |
| Листинг 11.35. Код для задания обратного порядка обхода полей формы |
| Закрыть окно |
| <form name="MyForm" action="MembershipForm.htm" method="post"> <h2>Membership Application Form</h2> <table> <tr> <td>First Name: </td> <td><input type="text" name="FirstName" size="15" maxlength="15"/></td> </tr> <tr> <td>Last Name: </td> <td><input type="text" name="LastName" size="15" maxlength="15"/></td> </tr> <tr> <td>Email: </td> <td><input type="text" name="Email" size="30" maxlength="50"/></td> </tr> <tr> <td>Gender: </td> <td><input type="radio" name="Gender" value="F"/>Female <input type="radio" name="Gender" value="M"/>Male</td> </tr> <tr> <td>Major: </td> <td><select name="Major"> <option>Web Development</option> <option>Digital Media</option> <option>Database Administration</option> <option>Networking</option> <option>Software Development</option> <option>Systems Analysis</option> </select></td> </tr> <tr> <td>Reason for<br/>Joining: </td> <td><textarea name="Reason" cols="30" rows="5"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="SubmitButton" value="Submit Form"/></td> </tr> </table> </form> |
| Листинг 11.36. Код формы для ввода данных |
| Закрыть окно |
| <SCRIPT runat="server"> Sub Submit_Form ( Src As Object, Args As EventArgs) If Email.Text <> "" Then Dim MyEmail = New MailMessage MyEmail.From = "dadams@mail.maconstate.edu" MyEmail.To = Email.Text MyEmail.Subject = "Form Submission" MyEmail.Body = "<h3>Membership Form</h3>" MyEmail.Body &= "<b>First Name = </b> " & FirstName.Text & "<br/>" MyEmail.Body &= "<b>Last Name = </b> " & LastName.Text & "<br/>" If Gender1.Checked Then MyEmail.Body &= "<b>Gender = </b> " & Gender1.Text & "<br/>" ElseIf Gender2.Checked Then MyEmail.Body &= "<b>Gender = </b> " & Gender2.Text & "<br/>" Else MyEmail.Body &= "<b>Gender = </b>Not checked<br/><br/>" End If MyEmail.Body &= "<b>Major = </b> " & Major.SelectedItem.Text & "<br/>" MyEmail.Body &= "<b>Reason = </b> " & Reason.Text & "<br/>" MyEmail.BodyFormat = MailFormat.Html SmtpMail.Send(MyEmail) Message.Text = "Form posted. Check your email." Else Message.Text = "Missing email address. Not posted." End If End Sub </SCRIPT> |
| Листинг 11.37. Серверный сценарий для создания сообщения email из введенных в форму данных |
| Закрыть окно |
