【邪影教程】html表单实例【邪影】

2015-10-28 20:36:10 -0400

[Title]Html表单例子[EndTitle] [Content]

复选框

单选按钮

当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。

简单的下拉列表

另一个下拉列表

文本域(Textarea)

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

The cat was playing in the garden.
创建按钮 
<html>

<body>

</body>
</html>

Fieldset around data 
<html>

<body>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

表单实例

带有输入框和确认按钮的表单 
<html>
<body>

<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

</body>
</html>

带有复选框的表单 
<html>

<body>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

带有单选按钮的表单 
<html>

<body>

<form name="input" action="/html/html_form_action.asp" method="get">
Male: 
<input type="radio" name="Sex" value="Male" checked="checked">
<br>
Female: 
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

从表单发送电子邮件 
<html>

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br>
<input type="text" name="name" value="yourname" size="20">
<br>
电邮：<br>
<input type="text" name="mail" value="yourmail" size="20">
<br>
内容：<br>
<input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>
</body>
</html></div><div class="wo-entry-section wo-text-html">
以下是刚刚的代码预览

[Title]Html表单例子[EndTitle]
[Content]

复选框 
<html>

<body>

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br>
我喜欢汽车：
<input type="checkbox" name="Car">
</form>

</body>
</html>

单选按钮 
<html>

<body>

<p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>

</body>
</html>

简单的下拉列表 
<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
另一个下拉列表 
<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
文本域(Textarea) 
<html>
<body>

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.
创建按钮 
<html>

<body>

</body>
</html>

Fieldset around data 
<html>

<body>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

表单实例

带有输入框和确认按钮的表单 
<html>
<body>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

</body>
</html>

带有复选框的表单 
<html>

<body>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

带有单选按钮的表单 
<html>

<body>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

从表单发送电子邮件 
<html>

</form>
</body>
</html>

[EndContent]
</div>
<div class="wo-entry-prev-next"><a href="/entry/373458" title="【邪影教程】html代码实例（上）【邪影】">«Newer</a>      <a href="/entry/373456" title="【邪影教程】html实例【邪影】">Older»</a></div>
<hr />
<a href="https://xieying.wodemo.com/">Back to home</a><br />
<br />

<span class="wo-site-feed-link"><a href="https://xieying.wodemo.com/subscribe">Subscribe</a> | </span>

<a href="https://wodemo.com/reg?return_to=https%3A%2F%2Fxieying.wodemo.com%2Fentry%2F373457">Register</a> |
<a href="https://wodemo.com/login?return_to=https%3A%2F%2Fxieying.wodemo.com%2Fentry%2F373457">Login</a>

</div>