HTML的form标签_html 插入form标签-CSDN博客

本文链接：https://blog.csdn.net/YZ0406280703/article/details/130514486

form标签的属性

action

action后接跳转的路径

<form action="demo01.html">

路径分为绝对路径和相对路径。

绝对路径：从盘符开始，找到你所需要的文件的路径路径+文件的名称

相对路径：当前源文件和目标文件的相对位置（..\+复制的相对路径，如果在同一文件夹中只需要名称就行）

method

method用来明确表单提交的方式，有get、post、dialog三种方式，默认值是get方式

<form action="form1.html" method="get">

由代码和图可以看出get方式会暴露用户信息在地址栏

<form action="form1.html" method="post">

由代码和图可以看出post方式不会暴露用户信息在地址栏，所以更推荐用post

name

name后接表单的名称

表单元素

input标签

语法格式：

<input type="元素的类型" name="元素的名称" value="元素的值" >

type的取值

text ----- 文本框

password ---- 密码框

radio ----- 单选按钮

checkbox ---- 多选按钮

submit ------ 提交按钮

reset ----- 复位按钮

button ---- 普通按钮

image ----- 图像按钮

file ------ 文本域（上传文件的按钮）

hidden ---- 隐藏域

email ------ 邮箱

color ---- 颜色域

date ----- 日期

time ----- 时间

datetime-local ----- 日期 + 时间

range ------ 进度条

input的属性

checked ----- 默认选择

readonly ----- 只读字段只可以读不能修改

disabled ------ 表示禁用不可以点击

autofocus ------ 默认光标的位置

required----- 不能为空白提交

select标签

select是下拉列表框，一般与option连用

<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>重庆</option>
<option value="">西安</option>
</select>

select的属性

除了默认的name,id之外还有multiple

multiple 属性指以列表形式显示

textarea标签

该标签是用来实现文本域的

textarea的属性

除了默认的name,id之外还有cols和rows

cols="n" --------- n 列，表示文本域的宽度

rows="n"-------- n 行，表示文本域的高度

<textarea name="" id="" cols="70" rows="70">

总结

form作为表单标签，很显而言之可以帮助我们做一个表单，比如常见的调查问卷，一般和 input连用，可以添加的内容也非常丰富，详情文中有提到，除了input还有select和textarea标签，对了，还有我认为最最重要的是路径，需要明白绝对路径和相对路径。如果有出错的或者不充分的欢迎指出。