HTML语言基础（6）表单

秋殇与星河

已于 2024-07-23 15:52:07 修改

阅读量1.1k

点赞数 36

分类专栏： HTML 文章标签： html

于 2024-06-11 18:18:58 首次发布

本文链接：https://blog.csdn.net/qiuluoyuwang/article/details/139602966

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

还没写完，明天继续写

注：此为看的视频总结方便后续复习。

前面都是一些例子和程序结合的图片，之后会在结尾进行总结，因此之后会把这类文章分为2部分

使用表单的目的是为了收集用户信息

在网页中会经常用到，如在游玩一个游戏时会或者在某个网页上注册新账号时会经常用到表单

1实例+程序：

如下图所示是我们老师推荐的刷题界面注册页面，这个可以看做是一个表单：

表单由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。

表单元素（小箱子，可以详细的表示各个功能）：对应上图中的专业班级、姓名、电子邮件等。

表单域是上图的全部截图（可以理解为一个大的箱子，来装各个表单元素的大箱子）。

提示信息即为上方专业班级、姓名、电子邮件等表单元素前的汉字

表单域是一个包含表单元素的区域：

<form> </form>标签用于定义表单域，以便实现用户信息的收集和传递

<form> </form>会把它范围内的表单元素信息提交给服务器

<form>

各种表单元素控件

</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

嗯，因为这些知识是白嫖视频的，嗯，所以这里视频没有表单域提交数据的教程

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

（1）input输入表单元素

（2）select下拉表单元素

（3）textaera文本域元素

1<input/>是一个单标签，在表单元素中<input/>标签用于收集用户信息（就是键盘输入的那些东西）

在<input/>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过）
checkbox	定义复选框
file	定义输入字段和“浏览按钮，共文件上传”
hidden	定义隐藏的输入字段
image	定义图像式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

该处程序是利用radio、text的type，其中还多用了name属性:

<!DOCTYPE html>

<head>

</head>

<body>

<form>

用户名：<input type="text"/><br/>

密码：   <input type="password"/><br/>

性别：男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br/>

</form>

</body>

</html>

添加需要多选、单选的信息：

<!DOCTYPE html>

<head>

</head>

<body>

<form>

用户名：<input type="text"/><br/>

密码：   <input type="password"/><br/>

性别：男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br/>

喜欢的事物: 睡觉<input type="checkbox" name="like"/> 打游戏<input type="checkbox" name="like"/> 看书<input type="checkbox" name="like"/>

</form>

</body>

</html>

<input/>表单属性：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户字定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name可以给表单起一个名字，用于区分不同的表单，上面的代码中没有添加name属性便无法做到单选按钮本身的功能，同一个按钮的name值应该要相同。

注：单选按钮与多选按钮必须规定好name属性

value就是在框中添加基本提示句

<!DOCTYPE html>

<head>

</head>

<body>

<form>

用户名：<input type="text" value="请输入用户的名称"/><br/>

密码：   <input type="password" maxlength="6"/><br/>

性别：男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br/>

喜欢的事物: 睡觉<input type="checkbox" name="like"/> 打游戏<input type="checkbox" name="like"/> 看书<input type="checkbox" name="like"/>

</form>

</body>

</html>

加checked之后：

因为在睡觉上面添加了checked所以会自动打勾，这个用在用户协定那里

注：checked属性注意针对于单选按钮和复选按钮

maxlength规定输入字段中字符的最大长度，可在输入密码，输入用户名的时候使用。

文件域：利用input的 file 属性来达到上传文件的目的

普通按钮：利用input的 button 属性来达到 value所命名的目的，但目前所学并不支持这种作用，之后所学会弥补该功能。

重置按钮：利用input的 reset 属性来达到重置你所填写的所以东西的目的。

<!DOCTYPE html>

<head>

</head>

<body>

<form>

用户:<input type="text" maxlength="5" value="请输入你的名字" name="username"/><br/>

密码:<input type="password" maxlength="6" name="pw"/><br/>

性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/>

爱好: 睡觉<input type="check"/><br/>

上传图片:<input type="file" value="上传图片"/><br/>

<input type="button" name="bn" value="获取验证码"/>&nbsp &nbsp &nbsp

<input type="submit" value="确定注册"/>&nbsp &nbsp

</form>

</body>

</html>

比较重要的标签:

1<label></label>标签,作用可以将光标（鼠标）可点击确定的范围扩大，一个<label></label>标签只能绑定一个表单元素,这标签可以更加方便用户注册该表单。

2<select></select>下拉标签，使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select></select>标签控件定义下拉标签。

格式:

</select>

注：<select></select>中至少包含一对<option></option>标签,在<option></option>中定义selectde="selected"时，当前项即为默认选中项

3<textarea></textarea>文本域标签，使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea></textarea>标签。该控件常见于留言板，评论。

格式：（column为列的意思，row为行的意思）

文本内容

</textarea>

2总结：

使用表单的目的是为了收集用户信息

在网页中会经常用到，如在游玩一个游戏时会或者在某个网页上注册新账号时会经常用到表单

表单由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。

表单元素（小箱子，可以详细的表示各个功能）：对应上图中的专业班级、姓名、电子邮件等。

表单域是上图的全部截图（可以理解为一个大的箱子，来装各个表单元素的大箱子）。

提示信息即为上方专业班级、姓名、电子邮件等表单元素前的汉字

表单域是一个包含表单元素的区域：

<form> </form>标签用于定义表单域，以便实现用户信息的收集和传递

<form> </form>会把它范围内的表单元素信息提交给服务器

常用属性：

属性	属性值	作用
action	url地址	用于指定接收处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

嗯，因为这些知识是白嫖视频的，嗯，所以这里视频没有表单域提交数据的教程

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

（1）input输入表单元素

（2）select下拉表单元素

（3）textaera文本域元素

1<input/>是一个单标签，在表单元素中<input/>标签用于收集用户信息（就是键盘输入的那些东西）

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过）
checkbox	定义复选框
file	定义输入字段和“浏览按钮，共文件上传”
hidden	定义隐藏的输入字段
image	定义图像式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<input/>表单属性：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户字定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度