html表单提交和input标签了解

最新推荐文章于 2023-08-06 13:35:10 发布

language？

最新推荐文章于 2023-08-06 13:35:10 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.csdn.net/Jingjinghey/article/details/126166565

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html表单提交和input标签了解

<form action="表单提交的位置（一个url）" method="post或get">
    <p>
        <input type="???" name="通过name找到此组件，养成每个组件起名字的好习惯" value="默认值、初始值"/>
    </p>
</form>

注：但凡input标签，都要定义name值

post和get的区别：
- get：可以在访问时看网页上方的url找到我们提的信息，不安全，高
  - post: 比较安全，传输大文件
??? : input标签有很多类型
- text ：文本框(默认)，其它属性比如：maxlenth(可输入字符串的最大长度)、size(文本框的长度)
- password: 密码，与文本框不同在于，在此类input中输入数据时，无法直接看到数据
- radio : 单选框，type、name、value是其必定义属性（同名才可多选一）
- checkbox : 多选框
- submit : 提交，点击，将表单内容提交到action属性对应的url处
- reset ：重置，清空表单
- button : 普通按钮
- image ：与submit等效，但用image代替了文字，使按钮外表不同
- select & option :下拉框,value属性表示控件代表的值
- textarea : 文本域，可设置cols和rows属性设置其列数和行数
- file ：文件域，用来上传文件
- url ：相当于一个网址
- number ：数字，可设置其max、min和step设置其最大值、最小值和每次调整数字的变化
- email ：邮箱，有简单的表单验证，但只要输入内容带有@或者为空，即可通过验证，不严谨
- range ：滑块，同样拥有max、min、step属性，可用作音量调整控件
- search : 搜索框
学习时抄的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form

action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post 和 get 两种不同的表单提交方式
         get方式提交可以在url中看到我们提交的信息，不安全，高效
         post方式比较安全，可以传输大文件
-->

<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框: input type="text"   设置name用于找到此表
        value为初始值，maxlength为可输入字符最大长度，size为输入框外表长度
    -->
    <p>名字: <input type="text" name="username" value="我很勇敢" maxlength="6" size="30"></p>
    <!--密码框: input type="password"-->
    <p>密码: <input type="password" name="pwd"></p>
    <!--单选框：radio：type   value：初始值   name：名字标识-->
    <!--注：一定要设置name，作为标价，否则两个radio不算一组，无法实现单选框-->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value = "girl" name="sex">女
    </p>
    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮-->
    <p>按钮：
        <!--普通按钮-->
        <input type="button" name="btn1" value="按钮">
        <!--与submit等效，按钮表现为自定义image-->
        <input type="image" src="resources/image/1.png">
    </p>
    <!--提交和重置-->
    <!--下拉框-->
    <p>国家：
        <select name="列表名称">
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3" selected>瑞士</option>
            <option value="4">印度</option>
        </select>
    </p>

    <!--文本域
        行：rows
        列：cols
    -->
    <p>反馈：
        <textarea name="textArea" cols="10" rows="3">文本内容

        </textarea>
    </p>
    <!--文件域-->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p>url:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>数字：
        <input type="number" name="number" max="10" min="0" step="10">
    </p>

    <!--滑块,读音量可能用到-->
    <p>滑块：
        <input type="range" name="voiceRange" max="100" min="0" step="2">
    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

language？

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html表单提交和input标签了解

get：可以在访问时看网页上方的url找到我们提的信息，不安全，高post: 比较安全，传输大文件???: input标签有很多类型text ：文本框(默认)，其它属性比如：maxlenth(可输入字符串的最大长度)、size(文本框的长度)password: 密码，与文本框不同在于，在此类input中输入数据时，无法直接看到数据radio : 单选框，type、name、value是其必定义属性（同名才可多选一）checkbox : 多选框。...
复制链接

扫一扫