HTML表单标签

最新推荐文章于 2024-03-06 06:32:48 发布

铁汉柔情

最新推荐文章于 2024-03-06 06:32:48 发布

阅读量71

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/2303_77843030/article/details/130473504

版权

1、form表单标签

form 表单用于搜集不同类型的用户输入。

form标签是一个块级元素，以<form>开头，</form>结尾，表单元素由input标签，和一些文本框，下拉框，一些按钮等，它能够包含input、textarea、select等标签。

表单内的属性：

属性	作用
action	跳转的路径
method	用于明确表单提交的方式（get post）默认值为get
name	表单的名称

get值会将用户信息暴露在地址栏上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><form action="demo01.html" method="get" name="regester">
    用户名: <input type="text"  name="ueserneme" ><br>
    密码: <input type="password" name="password"  ><br>
   <input type="submit">
</form>
    
</body>
</html>

post值不会将用户信息暴露在地址栏上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><form action="demo01.html" method="post" name="regester">
    用户名: <input type="text"  name="ueserneme" ><br>
    密码: <input type="password" name="password"  ><br>
   <input type="submit">
</form>
    
</body>
</html>

建议：写代码时，建议用post值，相对get值安全一点。

路径：

绝对路径：

C:\Users\26848\Desktop\云计算前端上课代码\第二天\demo01.html

相对路径：

..\第二天\demo01.html

1.1 input标签

input标签是form表单里面最重要的一个标签。

在input标签里面，根据type属性的不同，所展现出来的东西也不一样。

type的取值
取值	称述
text	文本框
password	密码框
radio	单选按钮
checkbox	多选按钮
submit	提交按钮
reset	复位按钮
button	普通按钮
image	图像按钮
file	文本域（上传文件的按钮）
hidden	隐藏域
email	邮箱
color	颜色域
date	日期
time	时间
datetime-local	日期+时间
range	进度条

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
  
    <form action="../第一天\demo.html" method="post" name="regester">
        用户名: <input type="text"  name="ueserneme" ><br>  
        密码: <input type="password" name="password"  ><br>
        请输入的性别:<input type="radio" value="男" name="ganden" >男
    <input type="radio"  name="randen">女
     <p>
        请输入你的爱好
        <input type="checkbox" name="aihao">唱歌
        <input type="checkbox" name="aihao">跳舞
        <input type="checkbox" name="aihao">rap
        <input type="checkbox" name="aihao">打篮球
    </p>
        <input type="submit">
        <input type="reset">
        <input type="botton" value="普通">
        <input type="file">
        <input type="hidden" value="12345"><br>
        请输入你的邮箱<input type="email" name=""email value="请填写邮箱">
        <input type="color" ><br>
        <input type="date" >
        <input type="time" >
        <input type="datetime-local" >
        <input type="range"  >
    </form>
</body>
</html>

运行页面：

1.1.2input的属性：

属性	作用
checked	默认选择
readonly	只读只能读不可修改
disabled	表示禁用不可点击
autofocus	默认光标的位置
required	不能为空白提交

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><form action="">
    用户名: <input type="text"  name="ueserneme" readonly><br>
    用户名: <input type="text"  name="ueserneme" disabled><br> 
    密码: <input type="password" name="password"   autofocus  required><br>
    请输入的性别:<input type="radio" value="男" name="ganden" checked>男
    <input type="radio"  name="randen">女
</form>
    
</body>
</html>

运行页面：

1.2select标签：

select标签常与option标签连用

属性	作用
selected	默认被选中的选项
multiple=“multiple”	以列表的形式显示

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><form action="">
    您的家庭住址 <select name="" id="" multiple="multiple">
                <option value="">兰州</option>
                <option value="">上海</option>
                <option value="" selected>深圳</option>
                <option value="">重庆</option>
                </select><br>
</form>
</body>
</html>

运行页面：

1.3textarea标签：

用来实现文本框的

属性	作用
cols	表示文本域的宽度
rows	表示文本域的高度

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><form action="">
    请留下你的宝贵意见：
    <textarea name="" id="" cols="10" rows="5">
    </textarea>
</form>
</body>
</html>

运行页面：