form表单标签总结

最新推荐文章于 2023-04-17 15:17:04 发布

Y9186

最新推荐文章于 2023-04-17 15:17:04 发布

阅读量487

点赞数 1

文章标签： 1024程序员节 html

本文链接：https://blog.csdn.net/iteuko/article/details/120941244

版权

什么是form表单：笔者在这里用一个常见的例子来说，平时我们都可以看见用户注册页面，那就是一个form表单，收集用户信息的

表单是以什么格式提交数据给服务器的：

HTTP协议规定格式：action？name=value&name=value&name=value&name=value......

表单中写name属性的会提交给服务器，不想提交的就不用写

input标签

语法结构：<input type="值"/>

type常用属性取值
text	文本框
password	密码框
value	对按钮来说value属性是设置按钮上显示的文本


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      用户名称:<input type="text" name="username" required />
      用户密码:<input type="password" name="userpassword"/>
    </form>
</body>

type常用属性取值
radio	单选按钮
checkbox	复选框
submit	提交按钮，具有提交表单的能力
reset	重置按钮
image	图片按钮
button	这是一个普通按钮，不具备提交的能力


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <input type="submit"/>提交
      用户性别:<input type="radio" name="gender">女<input type="radio" name="gender" checked/>男
      用户爱好:<input type="checkbox"/>篮球
      <input type="checkbox"/>LOL
      <input type="checkbox"/>吉他
   <!--其他属性-->
      <input type="reset"/>重置
      <input type="image"/>图像
    </form>
</body>

type常用属性取值
file	上传文件，文件域
hidden	隐藏域
email	邮箱


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <input type="file"/>文件域
      <input type="hidden"/>隐藏域
      请输入你的邮箱:<input type="email"/>
    </form>
</body>

常用属性取值(取值就是它本身可写可略)
readonly	只能读不能改
autofocus	自动默认光标位置
required	提示必填空
disabled	不可点击
checked	默认选项


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>w
<body>
    <form>
      <input type="text" name="lisi" disabled="disabled"/>
      <input type="password" required autofocus readonly/>
      <input type="radio" name="gender" checked>女<input type="radio" name="gender"/>男
      
    </form>
</body>

type常用属性取值
color	颜色板
date	日期
time	时间
datetime-local	日期+时间
range	进度条


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <input type="color"/>
      <input type="date"/>
      <input type="time"/>
      <input type="datetime-local"/>
      <input type="range"/>
    </form>
</body>

placeholder属性

placeholder 可描述输入字段预期值的提示信息


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      请输入你的邮箱:<input type="email" placeholder="输入邮箱"/>
    </form>
</body>

select标签（常用在选地址的时候）

属性有一个：multiple（支持多选，多选时需要加ctrl）不输入时默认下拉框

不加multiple


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <select>
         <option>北京</option>
         <option>上海</option>
         <option>湖南</option>
         <option>湖北</option>
         <option>重庆</option>
         <option>四川</option>

      </select>
    </form>
</body>

加multiple： size是显示条目的数量


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <select multiple="multiple" size="2">
         <option>北京</option>
         <option>上海</option>
         <option>湖南</option>
         <option>湖北</option>
         <option>重庆</option>
         <option>四川</option>

      </select>
    </form>
</body>

textarea标签： 各位肯定见到过一句话：这个人很懒,什么也没留下......

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Doctment</title>
</head>
<body>
    <form>
      <textarea  cols="20" rows="20" placeholder="这个人很懒，什么也没有留下"></textarea>
    </form>
</body>

再总结一个网页（这个网页需要用html是你自己写的）跳转（一个网页跳到另一个网页），也是form表单中的

语法结构：<form action=" " name=" " method=" "></form>

取值的含义
action	跳转的路径
name	表单的名字
method	跳转的请求方式

有两种请求方式：post请求和get请求

get请求：不安全,会在网页跳转后留下用户密码等(默认的是get请求）

post请求：相较安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
       <form action=".\demo01.html"method="post">
         <input type="submit"/>
       </form>
</body>

这里还要说到路径问题

路径有两种，一种是绝对路径。一种是相对路径。

绝对路径是：找到一个文件夹，单击鼠标右键，有个属性，属性里面有个位置，那就是绝对路径

相对路径是：当前的网页与要跳转的网页的相对路径（建议把这两个网页放在一个文件）

为什么上面这代码action=".\demo01.html"里面有一个点呢？

这表示的就是相对路径。最多只能有两个点表示

若用相对路径跳转不过去，请用绝对路径试试，这也是检查问题的好方法。

Y9186

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
form表单标签总结

什么是form表单：笔者在这里用一个常见的例子来说，平时我们都可以看见用户注册页面，那就是一个form表单，收集用户信息的input标签语法结构：<input type="值">type常用属性取值 text 文本框 password 密码框 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫