CSS表单和表单样式化用法详细指南 _交互表单

CSS表单用于为用户创建交互式表单。它提供了许多设置样式的方法。

文章图片
有许多可用的CSS属性, 可用于创建HTML表单并设置其样式, 以使其更具交互性, 下面列出其中一些：
属性选择器：
输入表单的属性类型可以采用多种形式, 具体取决于用户的选择。它可以是任何可能的类型, 例如文本, 搜索, URL, 电话, 电子邮件, 密码, 日期选择器, 数字, 复选框, 单选, 文件等。用户在创建表单时需要指定类型。
例子：

< !DOCTYPE html> < html > < head > < style > body{ background-color:green; } < / style > < / head > < body > < center > < b > Is lsbin useful ?< / b > < form > < input type = "radio" name = "useful" value = "https://www.lsbin.com/yes" checked> Yes < br > < input type = "radio" name = "useful" value = "https://www.lsbin.com/def_yes" > Definitely Yes < / form > < / center > < / body > < / html >

输出如下
:

文章图片
考虑另一个示例, 其中输入类型只是文本：

< !DOCTYPE html> < html > < head > < style > body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Do you find lsbin helpful?< / b > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
设置输入的宽度
：
宽度
属性用于设置输入字段的宽度。考虑下面的示例, 其中宽度设置为整个屏幕的10％。

< !DOCTYPE html> < html > < head > < style > input{ width:10%; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Do you find lsbin helpful?< / b > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
在输入中添加填充
：
填充
属性用于在文本字段内添加空格。考虑以下示例：

< !DOCTYPE html> < html > < head > < style > input{ width:10%; padding: 12px; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Do you find lsbin helpful?< / b > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
设置输入保证金
：
保证金
属性用于在输入字段外部添加空间。输入很多时会很有帮助。考虑下面带有两个输入的示例, 并观察它们之间的空间(边距)。

< !DOCTYPE html> < html > < head > < style > input{ width:10%; margin: 8px; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Mention two topics that you liked on lsbin< / b > < br > < input type = "text" name = "info" > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
添加边框和边框半径
：
边境
属性用于更改边框的大小和颜色, 而边框半径属性用于添加圆角。
考虑以下示例, 其中2像素稳定的红色创建的边框的半径为4像素.

< !DOCTYPE html> < html > < head > < style > input{ width:10%; margin: 8px; border: 2px solid red; border-radius: 4px; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Mention two topics that you liked on lsbin < / b > < br > < input type = "text" name = "info" > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
注意：用户还可以在任何特定的边上都具有边框, 并去除其他边或具有不同颜色的所有边框。考虑下面的示例, 其中用户只希望在顶部(蓝色)和底部(红色)边框。

< !DOCTYPE html> < html > < head > < style > input{ width:10%; margin: 8px; border: none; border-top: 3px solid blue; border-bottom: 3px solid red; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Mention two topics that you liked on lsbin < / b > < br > < input type = "text" name = "info" > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
为文本和背景添加颜色
：
颜色
属性用于更改输入中文本的颜色, 并且
背景颜色
属性用于更改输入字段背景的颜色。
考虑下面的示例, 其中文本的颜色为黑色, 背景色设置为绿色。

< !DOCTYPE html> < html > < head > < style > input{ width:10%; margin: 8px; border: none; background-color: green; color: black; }body{ background-color:white; } < / style > < / head > < body > < center > < form > < b > Mention two topics that you liked on lsbin < / b > < br > < input type = "text" name = "info" > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
【CSS表单和表单样式化用法详细指南】:

文章图片
焦点选择器
：当我们单击输入字段时, 它会显示蓝色轮廓。你可以使用：focus选择器更改此行为。
考虑下面的示例, 其中用户在聚焦时需要3px的纯红色轮廓和绿色背景。

< !DOCTYPE html> < html > < head > < style > input{ width:10%; margin: 8px; color: black; }input[type=text]:focus { border: 3px solid red; background-color: green; }body{ background-color:white; } < / style > < / head > < body > < center > < form > < b > Mention two topics that you liked on lsbin < / b > < br > < input type = "text" name = "info" > < br > < input type = "text" name = "info" > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
在输入表单中添加图像
：
背景图片
属性可以用于将图像放置在输入表单中, 并且可以使用background-position属性进行定位, 并且用户还可以决定是否重复。
考虑下面的示例, 其中背景图像为无重复模式。

< !DOCTYPE html> < html > < head > < style > input{ width: 20%; background-image: url('search.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; }body{ background-color:white; } < / style > < / head > < body > < center > < form > < b > Search on lsbin< / b > < br > < input type = "text" name = "info" placeholder = "Search.." > < br > < / form > < / center > < / body > < / html >

输出如下
:

文章图片
过渡属性
：
过渡
通过指定松弛宽度和聚焦宽度以及进行操作的时间段, 可以在输入字段上使用属性来更改字段的大小。
考虑下面的示例, 其中松弛的输入字段宽度为15％, 当聚焦时其宽度在1秒内变为30％。

< !DOCTYPE html> < html > < head > < style > input{ width: 15%; -webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }input[type=text]:focus { width: 30%; border:4px solid blue; }body{ background-color:green; } < / style > < / head > < body > < center > < form > < b > Search on lsbin< / b > < br > < input type = "text" name = "info" placeholder = "Search.." > < br > < / form > < / center > < / body > < / html >

输出如下
:
放松时