HTML的表单

HTML的表单

Administrator 286 2023-10-23

HTML表单

一、普通输入框

<input type="text" placeholder="文本占位符" name="nickname" value="输入框的默认值">

input是一个单标签,当type的取值为text的时候,input是一个普通的文本框

  • type: 取值为text(必填)

  • placeholder: 文本占位符,一般用于提示用户应该输入的值

  • name: 用于和后端交互的字段的识别

  • value: 文本框的值,在代码里如果写了value属性,那么这个value的值就会是输入框的默认值

type属性是必填的,如果type属性不填,则默认为type为text

如果不写name属性,则该字段无法被提交

name和value一般用于前后端交互使用,意思就是告诉后端某个值是什么含义

name就是指定这个控件的值在后端的含义

value就是这个控件所接收到用户输入的值

二、密码框

<input type="password">

type=password的时候,input控件会变成一个密码输入框,

密码框在用户输入值的之后是被隐匿的,用户无法直接看见自己输入的值

  • type: 取值为password(必填)

  • placeholder: 文本占位符,一般用于提示用户应该输入的值

  • name: 用于和后端交互的字段的识别

  • value: 文本框的值,在代码里如果写了value属性,那么这个value的值就会是输入框的默认值

type属性必填,且取值为password,如果不指定type属性,则默认为text

三、单选框

性别:<input type="radio" name="gender" value="男" checked>男 <input type="radio" name="gender" value="女"> 女

type=radio时,input控件是单选框

单选框一般要配合name属性使用,相同name属性的单选框为一个组,在相同name属性的单选框组内只有一个框可以被选中

同时还会配合value属性使用,value属性就是单选框的值,这个value属性不会显示在页面上,一般和单选框后面跟的文本是一样的值

单选框的文本占位符属性不生效

一般情况下,单选框会有一个默认选中,给单选框组内的任意一个单选框添加checked属性,那么该框就会变成选中状态

如果一个单选框组内有多个控件都被添加了checked属性,那么只有最后一个被添加checked属性值的控件生效

  • type: 控件类型,取值为radio

  • name: 用于和后端交互的字段的识别

  • value: 文本框的值,在代码里如果写了value属性,那么这个value的值就会是输入框的默认值

  • checked: 这个属性没有取值,添加了这个属性则表示该单选框被选中,没有添加这个属性就表示该单选框没有被选中

四、复选框

爱好:
<input type="checkbox" name="hobby" value="唱" checked>唱
<input type="checkbox" name="hobby" value="跳" checked>跳
<input type="checkbox" name="hobby" value="RAP">RAP
<input type="checkbox" name="hobby" value="篮球">篮球

type=checkbox时,input控件是复选框

复选框一般配合name属性使用,相同的name属性一般为一个组,组内的复选框可以被多选,

同时还会配合value使用,value属性的值就是复选框的值,这个value属性不会显示在页面上,一般和复选框的文本是一样的

复选框的文本占位符属性不生效

一般情况下,复选框可能会有多个默认选中,给组内要默认选中的复选框控件添加checked属性,该复选框会变成选中状态

如果一个组内多个复选框被添加了checked属性,那么,所有被添加checked属性的复选框都会被选中

  • type: 控件类型,取值为checkbox

  • name: 用于和后端交互的字段的识别

  • value: 文本框的值,在代码里如果写了value属性,那么这个value的值就会是输入框的默认值

  • checked: 这个属性没有取值,添加了这个属性则表示该复选框被选中,没有添加这个属性就表示该复选框没有被选中

五、文件选择框

<input type="file" name="file">

type=file时,该控件为一个文件选择控件

使用该控件可以将文件提交到后端

一般也会配合name属性使用

六、表单标签

<form action="" method="GET">
</form>

form标签表示一个表单,这个标签里面包含了这个表单所需要的所有控件

一般控件都会配合表单标签一起使用

  • action: 表单提交的地址

    • 需要将表单提交到的后台的地址

  • method: 表单提交的方式

    • GET:地址栏传参,用户对于参数是可见的,可以在地址栏看到类似于key1=value1&key2=value2的参数,一般用于不敏感数据的传递,同时使用这个方式传参对于参数大小有限制,最大只能传递2M的数据

    • POST:formData传参,用户对于参数是不可见的,只有当用户打开了开发者工具,在网络选项卡中才可以看得到传递给后端的参数,使用该方式传参对于参数大小没有限制,一般是由参数的接收端限制参数的大小

    • 如果这个参数为空,那么method默认为GET

七、input按钮

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

当type为submit的时候,input控件会变成一个提交按钮,value的值就是这个按钮所显示的内容,submit的功能是将表单的参数提交到后端处理

当type为reset的时候,input控件会变成一个重置按钮,value的值就是这个按钮所显示的内容,reset的功能是将表单内的所有控件的值全部恢复成初始状态

当type为button的时候,input控件是一个普通按钮,value的值是这个按钮所显示的内容,button一般会配合js一起实现交互功能

八、button按钮

<button>提交</button>
<button>重置</button>
<button>普通按钮</button>

当type为submit的时候,input控件会变成一个提交按钮,value的值就是这个按钮所显示的内容,submit的功能是将表单的参数提交到后端处理

当type为reset的时候,input控件会变成一个重置按钮,value的值就是这个按钮所显示的内容,reset的功能是将表单内的所有控件的值全部恢复成初始状态

当type为button的时候,input控件是一个普通按钮,value的值是这个按钮所显示的内容,button一般会配合js一起实现交互功能

button按钮为双标签,button按钮中间可以插入图片将button做成一个图片按钮

在谷歌浏览器中,如果button的type属性为空,那么默认这个button为提交按钮

在其他浏览器中,button的type为空则默认为普通按钮

功能和input的按钮是一样的,唯一的区别就是button是一个双标签,更方便的去引入其他的元素来对button按钮进行美化

九、select选择框

<select name="province">
    <option value="江西">江西省</option>
    <option value="浙江">浙江省</option>
    <option value="福建">福建省</option>
</select>

select: 选择框控件

option:选择框控件的选项

  • select

    • name: 表单的name项

  • option

    • value: 表单的value项目

表单提交的时候,会显示province=option的某一个value,这个value是由用户在select控件中选取的

十、textarea文本域标签

<textarea name="resume" cols="90" rows="10"></textarea>

用于多行文本的编辑,常见于网页的评论区

  • name:表单的name

  • cols:可视的纵向文字列数

  • rows:可视的横向文字行数