CSS——表单

最新推荐文章于 2023-11-17 16:21:22 发布

一李

最新推荐文章于 2023-11-17 16:21:22 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： css表单相关的格式

本文链接：https://blog.csdn.net/qq_43641432/article/details/102703467

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

表单：见用户信息提交给服务器

使用form标签创建一个表单：

action：

form标签中必须指定一个action属性，该属性指向一个服务器地址。当我们提交表单时候会提交到action对应的地址

表单项：

input：

创建一个文本框。

type:"text"--->如果希望表单项中的数据会提交到服务器中，还必须给表单指定一个name属性。name表示提交内容的名字，用户提交的信息会附在url后面的地址上以查询字符串的形式发送给服务器。格式：属性名= 属性值&属性名= 属性值&属性名= 属性值（可以有多个名值对，之间用&隔开）

在文本框中也可以使用value。为文本框中的默认值

创建一个提交按钮：

type："submit"

使用value设置提交的值

创建一个密码框

type:"password"

创建一个单选按钮

type:"radio";

单选按钮使用name分组，name属性相同的是一组按钮

像这种需要用户选择的但是不需要用户填写内容的表单项，必须指定一个value属性，这样

创建一个多选框

type:"chexkbox";

多选框使用name分组，name属性相同的是一组按钮

需要指定value属性。

下拉列表

使用select来创建

使用option来创建一个一个的列表项。

下拉列表的name指定给select，value指定给option

multiple = "multiple"可以使下拉列表设置为一个多选的下拉列表。

optgroup：对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字。

设置默认选中

如果希望单选按钮或者多选按钮中指定默认的选中框，加checked = "checked"属性

如果希望下拉列表中指定默认的选中框，加 selected = "selected";

创建一个多行文本域

textarea 创建 css设置大小

创建一个重置按钮

type = "reset" 重置按钮点击以后表单中的内容恢复为默认值。

创建一个新的按钮

type = "button" 单纯的点击按钮

单纯的button也可以创建按钮

这种方式和input类似，但是它是成对出现的标签，更加灵活

                        <input type="submit" value="我要注册" />
			<input type="reset" />
			<input type="button" value="按钮" />
			<br />
			<button type="submit">注册</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>

用来选中用户提交的文字

lable

使用lable标签选中的文字，鼠标移入后光标不会发生改变，可以设置一个for id值

为表单项进行分组

fieldset：可以将表单项中的同一组放在field中。

legend子标签来指定组名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<form action="target.html">
			<fieldset>
				<legend>用户信息</legend>
				<label for="123">用户名</label>
				<input id="123" name="uesrname"/><br />
				<label for="12">密码</label>
			</fieldset>
			<fieldset>
			<input id="12" name="password" /><br />
			性别
			<label for = "1233">男</label><input type="radio" name="gender" value="man" id="1233"/> 
			<label for="789">女</label><input type="radio" name="gender" value="woman" checked="checked"/>
			<br />
			爱好
			篮球<input type="checkbox" name="hobby" value="lq" checked="checked"/>
			足球<input type="checkbox" name="hobby" value="zq"/>
			球<input type="checkbox" name="hobby" value="q"/>
			乒乓球<input type="checkbox" name="hobby" value="pqq"/>
			<br />
			</fieldset>
			<select name="star" multiple="multiple">
				
				<optgroup label="women">
					<option value="z" selected="selected">li</option>
					<option value="a">benshan</option>
					<option value="aa">xi</option>
				</optgroup>
				<optgroup label="man">
					<option value="z" selected="selected">li</option>
					<option value="a">benshan</option>
					<option value="aa">xi</option>
				</optgroup>
			</select>
			<br />
			自我介绍<textarea>
				
			</textarea>
			<br />
			<input type="submit" value="我要注册" />
			<input type="reset" />
			<input type="button" value="按钮" />
			<br />
			<button type="submit">注册</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>
		</form>
	</body>
</html>

一李

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
CSS——表单

表单：见用户信息提交给服务器目录使用form标签创建一个表单：action：表单项：创建一个提交按钮：创建一个密码框创建一个单选按钮创建一个多选框下拉列表设置默认选中创建一个多行文本域创建一个重置按钮 ...
复制链接

扫一扫