form表单

最新推荐文章于 2024-11-12 11:19:19 发布

Sky---dog

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量91

点赞数 1

分类专栏：前端html 文章标签：前端 html

本文链接：https://blog.csdn.net/zhoujianjin666/article/details/130604922

版权

前端html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

form标签

属性：

action---------所要跳转的路径

method-------用来表明表单提交的方式（get/post 默认值为get 其中get会将用户信息暴露在地址栏上，相较于get，post更为安全）

name---------表单的名字

表单元素

表单元素一般由input，textarea，select等标签构成，需要放置在form标签内使用。

input标签

语法格式如下：

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

属性：

checked------默认选择

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

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

autofocus---默认光标的位置

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

type的取值：

text----------------文本框

password--------密码框

radio--------------单选按钮

checked----------多选按钮

submit------------提交按钮

reset--------------复位按钮

button------------普通按钮

image------------图像按钮（图片路径需要加上scr属性）

file----------------上传文件的按钮

email-------------邮箱

color--------------颜色域

date--------------日期

time--------------时间

datetime-local-日期加时间

hidden----------隐藏域

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="">
        用户名:<input type="text" name="username" value="xxx" disabled>
        密码:<input type="password" name="password" autofocus required><br>
        请选择你的性别:<input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女
        <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"><br>
        <input type="reset"><br>
        <input type="button" value="普通"><br>
        <input type="image" src=""><br>
        <input type="file"><br>
        <input type="hidden" value="123456"><br>
        <input type="email" name="email"><br>
        <input type="color"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="datetime-local"><br>
        <input type="range"><br>
    </form>
</body>
</html>

select标签

下拉列表框，一般与option标签进行连用

属性：

selected-------默认被选中的选项

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>Document</title>
</head>
<body>
    <form action="">
        <select name="" id="" multiple="">
            <option value="shanxi">兰州</option>
            <option value="shanxi">山西</option> 
            <option value="jiangsu">江苏</option>
        </select>
    </form>
</body>
</html>

textarea标签

用来实现文本域

cols="n" 表示文本域的宽度，想要多少列，n就取几

rows="n" 表示文本域的高度，想要多少行，n就取几

<!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>Document</title>
</head>
<body>
    <form action="">
        <textarea name="" id="" cols="50" rows="10">
            这家伙很懒，什么也没留下！
        </textarea>
    </form>
</body>
</html>