您的位置：首页 > Web前端 > HTML

HTML自学之旅（八）--表单和输入

2012-12-30 20:39 337 查看

<html>
<head>
<style type="text/css">
legend {background:red;width:200px}
</style>
</head>
<body>
<p>表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。</p>

<h1>输入</h1>
<h4>文本域（Text Fields）</h4>
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

<h4>文本域（Textarea）多行文本输入控件</h4>
<p>注意：后面必须添加封闭标签，否则，所有在textarea之后的东西全部作为文本域（Textarea）中的内容啦！</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<h4>密码域</h4>
<form>
用户名:
<input type="text" name="user" />
<br />
密码:
<input type="password" name="password" />
</form>
<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>

<h4>单选按钮（Radio Buttons）</h4>
<form>
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
</form>

<h4>复选框（Checkboxes）</h4>
<form>
<input type="checkbox" name="bike"> I have a bike.
<br />
<input type="checkbox" name="car"> I have a car.
<br />
<input type="checkbox" name="moto"> I have a moto.
</form>

<h1>表单的动作属性(action)和确认按钮</h1>
<p>假如在下面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。</p>
<form name="input" action="XXX.asp" nethod="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

<h4>简单的下拉菜单</h4>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
<option value="benz">Benz</option>
<option value="baoma">Baoma</option>
</select>
</form>

<h4>可以更改默认选择的下拉菜单</h4>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
<option value="benz" selected="selected">Benz</option>
<option value="baoma">Baoma</option>
</select>
</form>

<h4>创建按钮</h4>
<form>
<input type="button" name="helloworld" value="Hello World！">
</form>

<h4>Fieldset around data：如何在数据周围画一个带标题的框</h4>
<p>经试验，这样加的框，占满整个浏览页面的宽度哦。</p>
<fieldset>
<legend>健康信息</legend>
<form>
<p><label>身高：<input type="text" name="height"/></label></p>
<p><label>体重：<input type="text" name="weight"/></label></p>
</form>
</fieldset>

<h4>从表单发送电子邮件</h4>
<p>其中，enctype="text/plain"意思是按照纯文本方式编码，enctype意思是编码类型</p>
<form action="MAILTO:someone@uestc.edu.cn" method="post" enctype="text/plain">
姓名：<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="content"  size="50">
<br />
<br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

其中涉及到的asp的东西就没有写啦，还没学。。。

另外，每个浏览器对按钮，文本框，下拉列表的显示还是有点区别：

360：（IE与360一样，因为内核相同吧）

chrome：

chrome的还是好看些。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航