欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 22:54:40
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

相关标签: web html