CSS中的表单_css表单-优快云博客

本文链接：https://blog.youkuaiyun.com/liu0218/article/details/126162823

本文详细介绍了HTML中的表单控件，包括文本框、密码框、单选框、多选框、下拉列表、文本域、提交与重置按钮、普通按钮以及如何创建不同类型的按钮。此外，还探讨了input属性如placeholder和disabled的用法，并展示了如何使用label和fieldset元素增强表单的可用性。最后，提到了文件上传文本框和高级表单应用，如字段集、字段集标题和提示信息标签等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：将用户填写的信息发送给服务器，例如账号注册、个人资料修改等等。

一、创建表单

<body>
    <form action="">
        
    </form>
</body>

二、表单控件

1.文本框

<input type="text" name="" id="">

用来收集用户输入的文本。

2.密码框

<input type="password" name="" id="">

用来收集用户输入的密码，输入的内容会用*号遮掩。

3.单选框

<input type="radio" name="" id="">

在使用单选的一般是多个单选框联合使用，在使用的时候要设置相同的name属性值，也可以用checked属性来设置默认选择的选项，例如性别选择，

男 <input type="radio" name="sex" id="" checked value="男">
女 <input type="radio" name="sex" id="" value="女">

4.多选框

<input type="checkbox" name="" id="">

多选框在使用的时候也可以用checked属性来设置默认选中的选项。

5.下拉列表

<select name="sichuan" id="">
            <option value="成都" selected>成都</option>
            <option value="绵阳">绵阳</option>
            <option value="德阳">德阳</option>
            <option value="泸州">泸州</option>
</select>

用select标签包裹起来，然后用option包裹选项，其中value值必须设置，这样表单才会将下拉列表控件选择的值发送给服务器，其中用selected来设置默认选择的选项。

6.文本域

<textarea name="" id="" cols="30" rows="10">

</textarea>

其中cols属性设置一行最多显示的文字，rows属性设置文本的行数，也可以通过css来设置样式。

7.提交按钮

<input type="submit" name="" id="">

点击过后会将当前表单收集到的数据调教给服务器。

8.重置按钮

<input type="reset" name="" id="">

点击过后会重置表单所有填写的内容，初始化表单。

9.普通按钮

<input type="button" name="" id="">

这个按钮没有任何功能，但是也是后期用的最多的，点击事件监听一般都用。

10.利用button标签创建不同按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

三、input属性补充

1.placeholder

用来设置提示文字，常用来提示用户输入信息，在光标聚焦到输入框是就会隐藏。

<input type="text" name="" id="" placeholder="请输入用户名">

2.disabled

给控件设置了该属性表示禁用该控件，不能对控件进行操作

四、高级表单应用

1.表单字段集

例如：

<fieldset>
    <input type="text" class="txt" placeholder="请输入学生姓名...">
    <input type="submit" class="sub" value="">
</fieldset>

相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。

2.字段集标题

例如:

<legend align="left/right/center/justify">标题</legend>

legend元素可以在fieldset对象绘制的方框内插入一个标题，其中通过align控制标题显示位置，值有：left、right、center、justify。

tip: legend元素必须是fieldset内的第一个元素

3.提示信息标签

例如：

<label  for="txt">搜索：</label>
<input type="text" id="txt" placeholder="请输入学生姓名...">

上面代码能实现点击label标签里面的内容光标自动聚焦到标签中for的值；

label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同

4.上传文本框

<input type="file"/>

点击可以打开电脑的资源管理器进行文件选择，点击确认后上传，后期可以上传到服务器。