Web基本教程~02.表单样式设计

上一期

表单的介绍

       表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个 Html 文档中，当用户填写完信息后做submit操作，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

       表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

       在这一期只设计表单样式,表单的具体功能后面才会慢慢知道。

<form action＝"url" method="post" name="my" ></form>
-name：表单提交时的名称
-action：提交到的地址(如: www.baidu.com)
-method：提交方式，有 get 和 post 两种，默认为 get

       文本域通过< input type="text" > 标签来设定，当用户要在表单中键入字母、数字等 内容时，就会用到文本域。当 type = password时,则多用于密码域

<form>
	账号 : <input type="text" name="username"/> <br/>
	密码 : <input type="password" name="pwd"/>
</form>

       < input type="radio" > 标签定义了表单单选框选项。但是要注意必须要两个或者多个input的name一样才能实现单选的效果

<form>
	性别<br/>
	<input type="radio" value="男" name="sex"/>
	<input type="radio" value="女" name="sex"/>
</form>

        定义了复选框. 用户需要从若干给定的选择中选取一个 或若干选项。

<form>
	<input type="checkbox" name="foot" value="milk"/>
	i like milk
	<br/>
	<input type="checkbox" name="foot" value="egg"/>
	i like egg
</form>

       定义文件选择字段和 "浏览..." 按钮，供文件上传

选择一个文件: <input type="file" name="img">

       定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值

<input type="hidden" name="NullPointException">

       定义重置按钮（重置所有表单值为默认值）

<input type="reset">

图像图片按钮

       定义图像作为提交按钮

<input type="image" src="./img/but.jpg" />

       < select > 元素用来创建下拉列表。 < option > 标签定义下拉列表中的一个选项（一个条目）。

<select>
	<option>士</option>
	<option>农</option>
	<option>工</option>
	<option>商</option>
</select>

       < optgroup > 标签经常用于把相关的选项组合在一起

<select>
	<optgroup label="1">
		<option>士</option>
		<option>农</option>
	</optgroup>	
	<optgroup label="2">
		<option>工</option>
		<option>商</option>
	</optgroup>	
</select>

多行文本框

       < textarea > 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="10" cols="30"> 
	多行文本框
</textarea>

       < label > 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您 在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会 自动将焦点转到和标签相关的表单控件上。 < label > 标签的 for 属性应当与相关元素的 id 属性相同

<form action="demo_form.php"> 
	<label for="egg">
		牛奶
	</label> 
	<input type="radio" name="sex" id="egg" value="egg"> <br> 
	<label for="milk">
		鸡蛋
	</label> 
	<input type="radio" name="sex" id="milk" value="milk"> <br> 
	<input type="submit" value="提交"> 
</form>