“表单和导航”的版本间的差异
来自CloudWiki
（创建页面，内容为“==表单== ===基本表单=== *源码： <nowiki><form> First name: <input type="text" name="fname"> Last name: <input type="text" name="lname"> <input type="…”） |
（→多功能表单） |
||
| 第31行： | 第31行： | ||
<p> | <p> | ||
<form action="/example/html/form_action.asp" method="get"> | <form action="/example/html/form_action.asp" method="get"> | ||
| + | |||
请搜索关键字： <input type="text" name="fname" style="height:30px;"/> | 请搜索关键字： <input type="text" name="fname" style="height:30px;"/> | ||
<input type="image" src="/i/eg_submit.jpg" alt="Submit" | <input type="image" src="/i/eg_submit.jpg" alt="Submit" | ||
style="height:40px;vertical-align:bottom"/><br><br> | style="height:40px;vertical-align:bottom"/><br><br> | ||
| − | <input type="radio" name="byway" value="jd" checked >京东配送 | + | 配送方式：<input type="radio" name="byway" value="jd" checked >京东配送 |
<input type="radio" name="byway" value="other">其他配送<br><br> | <input type="radio" name="byway" value="other">其他配送<br><br> | ||
配送区域： | 配送区域： | ||
| 第43行： | 第44行： | ||
<option value="粤港澳">粤港澳</option> | <option value="粤港澳">粤港澳</option> | ||
<option value="其他">其他</option> | <option value="其他">其他</option> | ||
| − | </select> | + | </select> |
| + | |||
| + | |||
| + | |||
</form> | </form> | ||
</p> | </p> | ||
| + | |||
| + | |||
</body> | </body> | ||
</html></nowiki> | </html></nowiki> | ||
| + | |||
==导航== | ==导航== | ||
2018年1月1日 (一) 02:53的版本
表单
基本表单
- 源码：
<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>请在这幅图像上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</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>
