CSS—表单

本文详细介绍了CSS中表单的相关知识,包括表单域的定义,以及三种主要的表单控件——input、select和textarea。input标签的type属性可以根据不同值创建多种输入类型,如文本、复选框等。label标签可以与input绑定,提升用户体验。select用于创建下拉列表,option定义选项,而textarea则用于多行文本输入。在实际开发中,通常使用CSS调整这些元素的大小和样式。
摘要由CSDN通过智能技术生成

1 表单域

表单域是一个包含表单元素的区域,在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式,其取值为get或post
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域

2 表单控件(表单元素)

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或选择的内容控件。

  • input输入表单元素
  • select下拉表单元素
  • textarea文本域元素

(1)<input>
在<input

HTML 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入内容,比如:文本框、下拉列表、单选框、复选框等等。 以下是一个基本的 HTML 表单: ```html <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label for="gender">性别:</label> <select id="gender" name="gender"> <option value="male">男</option> <option value="female">女</option> <option value="other">其他</option> </select><br><br> <label>爱好:</label><br> <input type="checkbox" id="hobby1" name="hobby1" value="reading"> <label for="hobby1">阅读</label><br> <input type="checkbox" id="hobby2" name="hobby2" value="music"> <label for="hobby2">听音乐</label><br> <input type="checkbox" id="hobby3" name="hobby3" value="sports"> <label for="hobby3">运动</label><br><br> <input type="submit" value="提交"> </form> ``` 上面的代码中,我们使用了 `<form>` 元素来创建一个表单表单中包含了几个不同类型的表单元素,比如:文本框、密码框、下拉列表和复选框等。每个表单元素都有一个 `name` 属性和一个 `id` 属性,这些属性用于标识表单元素。 在表单的最后,我们使用了一个 `<input>` 元素来创建一个提交按钮,这个按钮将用户输入的数据提交到服务器。 接下来,我们使用 CSS 来美化这个表单: ```css form { width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f5f5f5; } label { display: inline-block; width: 80px; text-align: right; } input[type="text"], input[type="password"], select { width: 220px; padding: 5px; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; font-size: 16px; line-height: 1.5; box-sizing: border-box; } select { height: 30px; } input[type="checkbox"] { vertical-align: middle; } ``` 上面的 CSS 代码中,我们使用了一些常见的属性,比如 `width`、`margin`、`padding`、`border`、`border-radius`、`background-color` 等等,这些属性可以用来控制表单的样式。 我们还使用了一些伪类选择器,比如 `:hover`、`:focus` 等等,这些选择器可以用来控制表单元素的交互效果。 最终,我们得到了一个美观、实用的 HTML 表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值