|
|
| 第13行： |
第13行： |
| | ===美化表单=== | | ===美化表单=== |
| | *[[文件:w8-9.png]] | | *[[文件:w8-9.png]] |
| | + | <div style="display:none;"> |
| | *源码： | | *源码： |
| | <nowiki><html> | | <nowiki><html> |
| 第29行： |
第30行： |
| | </body> | | </body> |
| | </html></nowiki> | | </html></nowiki> |
| | + | </div> |
| | ===多功能表单=== | | ===多功能表单=== |
| | *[[文件:w8-10.png]] | | *[[文件:w8-10.png]] |
| | + | <div style="display:none;"> |
| | *源码： | | *源码： |
| | <nowiki><html> | | <nowiki><html> |
| 第59行： |
第62行： |
| | </body> | | </body> |
| | </html></nowiki> | | </html></nowiki> |
| | + | </div> |
| | ===用表格布局=== | | ===用表格布局=== |
| | *[[文件:w8-11.png]] | | *[[文件:w8-11.png]] |
| | + | <div style="display:none;"> |
| | *源码： | | *源码： |
| | <nowiki><html> | | <nowiki><html> |
| 第96行： |
第101行： |
| | </body> | | </body> |
| | </html></nowiki> | | </html></nowiki> |
| | + | </div> |
| | ==导航== | | ==导航== |
2018年1月2日 (二) 01:01的版本
表单
基本表单
<form>
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="提交">
</form>
美化表单
<html>
<body>
<p>
<form action="/example/html/form_action.asp" method="get">
FirstName <input type="text" name="fname" style="height:30px;"/>
LastName <input type="text" name="lname" style="height:30px;"/>
<input type="image" src="/i/eg_submit.jpg" alt="Submit"
style="height:40px;vertical-align:bottom"/>
</form>
</p>
<p>注释：如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>
</body>
</html>
多功能表单
<html>
<body>
<p>
<form action="/example/html/form_action.asp" method="get">
请搜索关键字： <input type="text" name="fname" style="height:30px;"/>
<input type="image" src="/i/eg_submit.jpg" alt="Submit"
style="height:40px;vertical-align:bottom"/><br><br>
配送方式：<input type="radio" name="byway" value="jd" checked >京东配送
<input type="radio" name="byway" value="other">其他配送<br><br>
配送区域：
<select>
<option value="京津冀">京津冀</option>
<option value="沪宁杭">沪宁杭</option>
<option value="粤港澳">粤港澳</option>
<option value="其他">其他</option>
</select>
</form>
</p>
</body>
</html>
用表格布局
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<table>
<tr>
<td>请搜索关键字：</td>
<td><input type="text" name="fname" style="height:30px;"/>
<input type="image" src="/i/eg_submit.jpg" alt="Submit"
style="height:40px;vertical-align:bottom"/>
</td>
</tr>
<tr>
<td>配送方式：</td>
<td><input type="radio" name="byway" value="jd" checked >京东配送
<input type="radio" name="byway" value="other">其他配送
</td>
</tr>
<tr>
<td>配送区域：</td>
<td>
<select>
<option value="京津冀">京津冀</option>
<option value="沪宁杭">沪宁杭</option>
<option value="粤港澳">粤港澳</option>
<option value="其他">其他</option>
</select>
</td>
</tr>
</form>
</body>
</html>
导航
