（十四）HTML表单

it2022-05-28 70

<form>元素定义了表单，所有表单输入元素都嵌套在这个元素中。action属性包含服务器脚本的URL。method属性包含发送表单数据的方法，可以是POST或GET。POST打包表单数据，并把它作为请求的一部分发送到服务器。GET打包表单数据，并把数据追加到URL。如果表单数据应当是私有的，或者表单数据很多，如使用了一个<textarea>或者file <input>元素，就应当使用POST。对于可以加书签的请求，要使用GET。<input>元素在Web页面上可以作为多种不同的输入控件，这取决于它的“type”属性值。type为“text”时会创建一个单行文本输入框。type为“submit”时会创建一个提交按钮。type为“radio”时会创建一个单选钮。所有同名的单选钮构成一组互斥的按钮。type为“checkbox”时会创建一个复选框控件。通过为多个复选框指定相同的名字，可以创建一组选择。type为“number”时会创建一个只允许数字字符的单行文本输入控件。type为“range”时会创建一个滑动条控件提供数字输入。“color”类型会在支持这个类型的浏览器中创建一个颜色选择器（否则只会创建一个普通的文本输入控件）。“date”类型会在支持这个类型的浏览器中创建一个日期选择器（否则只会创建一个普通的文本输入控件）。“email”、“url”和“tel”类型会创建单行文本输入，在一些移动浏览器上会出现定制键盘来方便数据输入。<textarea>元素会创建一个多行文本输入区。<select>元素会创建一个菜单，包含一个或多个<option>元素。<option>元素定义了菜单中的菜单项。如果文本放在<textarea>元素的内容中，这会成为Web页面上文本区控件中的默认文本。text <input>元素中的value属性可以用来为单行文本输入控件提供一个初始值。在提交按钮上设置value属性可以改变按钮上显示的文本。提交一个Web表单时，表单数据值与相应的数据名匹配，所有名和值会发送到服务器。由于表单有一个表格结构，通常会用CSS表格显示来建立表单布局。CSS还可以用来指定表单的颜色、字体风格、边框等样式。HTML允许用<fieldset>元素组织表单元素。可以用<label>元素以一种有助于提高可访问性的方式关联标签与表单元素。使用placeholder属性可以为表单用户提供一个提示，指出你希望在一个输入域中输入什么内容。required属性指示一个输入域是必要的，要让表单成功提交，这个输入域中必须有值。有些浏览器在你提交表单之前会强制要求在这些域中输入数据。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background:#efe5d0; margin:20px; } form { display:table; padding:10px; border:thin dotted #7e7e7e; background-color:#e1ceb8; } form textarea { width:500px; height:200px; } div.tableRow { display:table-row; } div.tableRow p { display:table-cell; vertical-align:top; padding:3px; } div.tableRow p:first-child { text-align:right; } p.heading { font-weight:bold; } </style> </head> <body> <form action="http://xxx" method="post"> <div class="tableRow"> <p> Choose your beans: </p> <p> <select name="beans"> <option value="House Blend">House Blend</option> <option value="Bolivia">Bolivia</option> <option value="Guatemala">Guatemala</option> <option value="Kenya">Kenya</option> </select> </p> </div> <div class="tableRow"> <p>Type:</p> <p> <input type="radio" name="beantype" value="whole"> Whole bean<br> <input type="radio" name="beantype" value="ground" checked> Ground </p> </div> <div class="tableRow"> <p>Number of bags:</p> <p><input type="number" name="bags" min="1" max="10"></p> </div> <div class="tableRow label"> <p>Must arrive by date:</p> <p><input type="date" name="date"></p> </div> <div class="tableRow"> <p>Extras:</p> <p> <input type="checkbox" name="extras[]" value="giftwrap">Gif wrap<br> <input type="checkbox" name="extras[]" value="catalog" checked> Include catalog with order </p> </div> <div class="tableRow"> <p class="heading">Ship to</p> <p></p> </div> <div class="tableRow"> <p>Name:</p> <p><input type="text" name="name" value=""></p> </div> <div class="tableRow"> <p>Address:</p> <p><input type="text" name="address" value=""></p> </div> <div class="tableRow"> <p>State:</p> <p><input type="text" name="state" value=""></p> </div> <div class="tableRow"> <p>Zip:</p> <p><input type="text" name="zip" value=""></p> </div> <div class="tableRow"> <p>Phone:</p> <p><input type="text" name="phone" value=""></p> </div> <div class="tableRow"> <p>Customer Comments:</p> <p> <textarea name="comments" rows="10" cols="48"></textarea> </p> </div> <div class="tableRow"> <p></p> <p><input type="submit" value="Order Now"></p> </div> </form> </body> </html>

转载于:https://www.cnblogs.com/giscode/p/6633553.html

专利

最新回复(0)