Web基本教程~02.表单样式设计
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>
labe
< 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>
本文地址:https://blog.csdn.net/qq_41424688/article/details/112184137
下一篇: AngularJS表单提交实例详解