HTML form表单 input输入框

最新推荐文章于 2023-05-27 11:49:46 发布

Casey-Z

最新推荐文章于 2023-05-27 11:49:46 发布

阅读量1.6k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_43381610/article/details/110009599

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记录：

form标签的作用是在页面引入一个表单，该表单可以直接将数据提交给服务器。action属性用来设置提交的服务器地址

描述：

input输入框.通过type属性可以设置不同类型的输入框。

解决方案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- form标签的作用是在页面引入一个表单，该表单可以直接将数据提交给服务器。action属性用来设置提交的服务器地址 -->
    <form action="" oninput="add.value=left.value+right.value">
        <!-- form表单元素 -->
        <!-- input输入框.通过type属性可以设置不同类型的输入框。text： 普通的文本框。 -->
        <input type="text" placeholder="请输入内容">
        <!-- 2.密码框 -->
        <input type="password" placeholder="请输入密码">
        <!-- label用来给表单元素设置一个标签（表单名字） -->
        <label for="">确认密码：<input type="password"></label>
        <!-- 3.单选框。需要将多个单选框设置同一个name才能形成单选效果 -->
        <label for="">性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </label>
        <!-- 4.多选框 （其实也需要设置同一个name）-->
        <input type="checkbox">html
        <input type="checkbox">css
        <input type="checkbox">js

        <!-- 5.文件选择框  accept：接受 用来设置能够接受的文件格式（mime类型）multiple设置一次性可以选择多个文件-->
        <input type="file" accept="image/jpeg,image/png" multiple>

        <!-- 6.数字框 -->
        <input type="number">

        <!-- 7.日期选择框 date日期-->
        <input type="date">

        <input type="datetime" name="" id="">

        <!-- 9.邮件格式的输入框 （当点击提交会判断输入内容是否是邮件格式）-->
        <input type="email" name="" id="">

        <!-- 10.提交按钮（可以将以上表单元素填写的内容全部提交给服务器） -->
        <input type="submit" value="已完成，现在提交">


        <!-- 11.普通按钮，不具备提交功能 -->
        <input type="button" value="提交了">

        <input type="color">

        <input type="range">
        <!-- 12.重置按钮（会重置输入框的内容） -->
        <input type="reset" value="重置内容">

        <!-- 13.textarea文本域  cols：设置多上列文字那么宽。rows：设置有多少行文字那么高-->
        <textarea name="" id="" cols="30" rows="10"></textarea>

        <!-- 14.列表 -->
        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">杭州</option>

        </select>
<!-- 15.备选数据列表 -->
<!-- input设置list代表给输入框设置备选框 -->
<input type="text" id="" list="xxx">
        <datalist id="xxx">
            <option value="北京"></option>
            <option value="上海"></option>
            <option value="杭州"></option>
        </datalist>

<!-- output输出，主要用于将多个输入框输入的内容进行实时运算输出 -->
        <div>
            <input type="number" name="" id="left">+
            <input type="number" id="right">=
            <output for="left right" id="add">
        </div>

    </form>


</body>

</html>

Casey-Z

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML form表单 input输入框

记录：form标签的作用是在页面引入一个表单，该表单可以直接将数据提交给服务器。action属性用来设置提交的服务器地址描述：input输入框.通过type属性可以设置不同类型的输入框。解决方案：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫