网页设计入门--表单

<form></form>：用于为用户输入创建html表单；form元素是块级元素，其前后会产生折行；

　　　　　　　　　表单能够包含input元素（比如文本字段、复选框、单选框、提交按钮等等），也可以包含menus、textarea、fieldset、legend和label元素

代码如下：

1  <!--method="get|post",
2 action=url用于设定处理表单数据文件url的地址。这个文件通常是后台服务器应用程序文件，也可以是一个电子邮件地址。采用电子邮件方式时，用action="mailto:邮件地址"保存-->
3 <form id="myform" method="post" action="form_action.asp">
4 <!--此处可以放文本域（text fields|textarea）、密码域、复选框、单选按钮、单选按钮、下拉列表、围绕数据的fieldset、带有输入框和确认按钮的表单、带有复选框的表单、带有单选按钮的表单、从表单发送电子邮件-->
5 </form>

下面我就列出几种比较常用的表单：

 1 <p>
 2 <!--在使用<label>标签时可以定义for属性，设置为表单对象的name属性值；
 3 可以在每个标签里添加class，进一步定义表单属性；-->
 4     <label for="user" class="label">用户名：</label>
 5     <input type="text" name="user" id="user" class="user" />
 6 </p>
 7 <p>
 8 <!--placeholder属性是提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失-->
 9     <label for="password">密码：</label>
10     <input type="password" id="password" placeholder="enter your password" />
11 </p>
12 <p>
13 <!--value属性值“http://”避免了用户每次输入时的麻烦-->
14     <label for="website">网址：</label>
15     <input id="website" value="http://" name="website" />
16 </p>
17 <p><!--复选框-->
18 我喜欢的运动方式是：
19 <input type="checkbox" name="walking" />走路
20 <input type="checkbox" name="swimming" />游泳
21 <input type="checkbox" name="running" />跑步
22 </p>
23 <p><!--单选框-->
24 性别：<!--可以在其中一个<input>标签中加入checked="checked"属性，显示预选定性别-->
25     <input type="radio" name="male" id="radio" value="male"/>男
26     <input type="radio" name="female" id="radio" value="female" />女
27 </p>
28 <p>选择你中意的汽车品牌：
29 <!--可以在其中一个<option>标签中加入checked="checked"属性，显示预选定汽车-->
30     <select name="cars" id="select">
31         <option value="Volvo">Volvo</option>
32         <option value="Saab">Saab</option>
33         <option value="Fiat">Fiat</option>
34         <option value="Audi">Audi</option>
35     </select>
36 </p>
37 <p>请输入您对我们的意见建议：</p>
38     <textarea name="textarea" rows="5" cols="50" align="top">
39     </textarea>
40 <!--type="button|reset|submit"-->
41 <p>
42     <input type="button" name="submit" id="submit" value="submit" />
43 </p>
44 <!--围绕数据的fieldset-->
45 <fieldset>
46 <legend>健康信息</legend>
47 <form>
48 <label>身高：<input type="text" /></label>
49 <label>体重：<input type="text" /></label>
50 </form>
51 </fieldset>
52 <!--如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面-->
53 <form name="input" action="http://www.W3CSchool.cn/html/html_form_action.asp" method="get">
54 I have a bike:
55 <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
56 <br />
57 I have a car: 
58 <input type="checkbox" name="vehicle" value="Car" />
59 <br />
60 I have an airplane: 
61 <input type="checkbox" name="vehicle" value="Airplane" />
62 <br /><br />
63 <input type="submit" value="Submit" />
64 </form> 
65 <!--这个表单会把电子邮件发送到 W3CSchool-->
66 <form action="MAILTO:someone@W3CSchool.cn" method="post" enctype="text/plain">
67 电子邮件：<br>
68 <input type="text" name="mail" value="yourmail" size="20">
69 <br>
70 内容：<br>
71 <input type="text" name="comment" value="yourcomment" size="40">
72 <br><br>
73 <input type="submit" value="发送">
74 <input type="reset" value="重置">
75 </form>

显示结果如下：

同时，我们也可以在css或js里继续增加表单的属性设置，使表单更美观：

1、只有下划线的文本框；

2、输入框背景透明；

3、鼠标划过输入框，输入框背景变色；

4、输入字时输入框边框闪烁；

5、输入框自动横向延伸；

6、文本框自动向下延伸；

7、按钮有颜色；

8、没有边框的输入框；

9、多行文本框；

 

转载于:https://www.cnblogs.com/helloyyn/p/4460351.html