form表单及其连用标签总结

最新推荐文章于 2023-05-09 17:47:45 发布

qq3178535571

最新推荐文章于 2023-05-09 17:47:45 发布

阅读量402

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/qq3178535571/article/details/120975534

版权

form表单简单介绍

form一般与input连用，包含input标签，textarea标签，select标签。
跳转的文件在同一个文件夹中，才能实现直接编写**（demo01.html)**整个文件，否则需要表明路径;

绝对路径：从盘符开始查找，直到找到文件为止，路径＋文件名
例如：C:\Users\wx\Desktop\demo.html
相对路径：当前文件和目标文件的相对路径，例如：…\demo.html
"…“表示从上一级开始查找，直到找到文件为止。
注意：文件名前应加”",容易出错成"/"

form表单语法结构

<form action=" “name=” “method=”">
action------跳转的路径
name------表单的名字
methed------跳转的方式

两种跳转网页的请求方式：post请求，get请求（默认为get请求）

get请求（输入name时显示密码，不安全）：

file:///D:/A%E4%BA%91%E8%AE%A1%E7%AE%97/demo01.html?username=zxc&password=4561230

post请求(相对较安全)：

file:///D:/A%E4%BA%91%E8%AE%A1%E7%AE%97/demo04.html

例如：

<html lang="en">
 <head>
        <meta charset="UTF-8"> 
        <title>form表单标签</title>
 </head>
  <body>
       <form action="..\demo02.html" > 
       用户名：<input type="text" name="username">
       密码：<input type="password" name="password"> 
       <input type="submit">
 </form> 
 </body>
 </html>

input标签

tepe属性的取值

text	文本框
possword	密码框
rest	复位按钮（重置按钮）
submit	提交按钮
button	按钮（普通按钮）
radio	单选按钮
checked	多选按钮
image	图像按钮（src属性，一般吧采用）
file	上传文件（文件域，相较于image常用
eamil	邮箱
color	颜色
date	日期
time	时间
datetime-local	日期＋时间
range	进度条
url	文本字段（一般用text代替）
hidden	隐藏域作用：提交一些用户不可见的信息

属性（可直接在input输入）：

readonly	字段只能读不能修改
disabled	规定input标签禁用，不可点击（灰色框）
required	提示input标签不能为空白提交
autofocus	默认光标位置
checked	默认选择
seleted	默认选择某一项

***小总结：***与默认有关属性
及：autofocus------默认光标位置
checked------ 默认选择
seleted------默认选择某一项

value小扩展：
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type=“button”, “reset”, “submit” ------定义按钮上的显示的文本
type=“text”, “password”, “hidden” ------- 定义输入字段的初始值
type=“checkbox”, “radio”, “image” ------定义与输入相关联的值
注释：input type=“checkbox” 和 input type=“radio” 中必须设置 value 属性。

注释：value 属性无法与 input type=“file” 一同使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>input标签</title> 
</head> 
<body>
<h2>用户注册</h2>
<form>
      <p>用户名:<input type="text" value="zhangsan" name="username" readonly disabled></p>
       <p>密码:<input type="password" autofocus></p> 
       <p>确认密码:<input type="password" required></p> 
       <p> 
       请选择你的性别:<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </p> 
       <p> 
       请选择你的爱好:<input type="checkbox">唱歌 
       <input type="checkbox">跳舞 
       <input type="checkbox">rap
       <input type="checkbox">篮球
        </p> 
       <input type="submit" value="上传">
       <input type="reset" value="复位"> 
       <input type="button" value="按钮">
       <input type="image" src="按钮.jpg">
       <input type="file"> <input type="hidden" > 
       请输入你的邮箱:<input type="email" > 
  </form> 
</body> 
</html>


```html

select标签

select------下拉列表框

属性	解释
option	子选项（下拉列表框的选项）
multiple	以列表的形式显示

不加multiple：

请选择你所在的城市：
            <select>
                <option>西安</option> 
                <option>重庆</option> 
                <option>内江</option> 
                <option>江苏</option> 
                <option>北京</option> 
                <option>上海</option> 
            </select>

加multiple 且默认选择重庆：

请选择你所在的城市：
              <select multiple="multiple"> 
                  <option>西安</option> 
                  <option selected="selected">重庆</option> 
                  <option>内江</option> 
                  <option>江苏</option> 
                  <option>北京</option> 
                  <option>上海</option> 
              </select>

小总结：标题标签与font标签的差异
标题标签：hn n取值1~6 字体大小由大到小，字体加粗，自动换行。
font标签：size属性取值1~7 字体大小由小到大，字体逐渐加粗，不会自动换行。

textarea标签

clos	文本域的宽度
rows	文本域的高度

  <p> 
     <textarea cols="50" rows="5">这个家伙很懒，什么都没有留下...... 
</textarea> 
  </p>

qq3178535571

关注

0
点赞
踩
1

收藏

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

form表单简单介绍form一般与input连用，包含input标签，textarea标签，select标签。跳转的文件在同一个文件夹中，才能实现直接编写**（demo01.html)**整个文件，否则需要表明路径;绝对路径：从盘符开始查找，直到找到文件为止，路径＋文件名例如：C:\Users\wx\Desktop\demo.html相对路径：当前文件和目标文件的相对路径，例如：…\demo.html"…“表示从上一级开始查找，直到找到文件为止。注意：文件名前应加”",容易出错成"/"for
复制链接

扫一扫