【HTML】input&多行文本

input实现上传文件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>input实现文件上传</title></head><body><form action="XXX" method="post" enctype

郭大发.

14441人浏览 · 2021-06-27 15:28:23

郭大发. · 2021-06-27 15:28:23 发布

input实现上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input实现文件上传</title>
</head>
<body>
    <form action="XXX" method="post" enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="1024">
        <!--限制上传文件的大小和类型-->
        <!--multiple 可以同时上传多个文件-->
        <label>请选择你要上传的文件：<input type="file" name="file" accept="image/*" multiple></label>
    <br><br>
    <input type="submit" value="提交">
    </form>
</body>
</html>

input实现仅数字输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input实现仅数字输入</title>
</head>
<body>
    <form action="XXX" method="post" enctype="multipart/form-data">
        <!--限制数字的大小-->
        <!--range为数值滚动条-->
        <label>输入年龄：<input type="number" min="1" max="100"></label>
        <label>输入年龄：<input type="range" name="age" value="1" min="1" max="100" step="1" ></label>
        <label>邮箱：<input type="email" name="email" pattern="^[A-Za-z0-9-_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"></label>
        <label>电话：<input type="tel" name="tel" pattern="" placeholder="号码" list="tellist"></label>
        <!--placeholder占位提示文本-->
        <label>网址：<input type="url" name="url" pattern="" required size="30" maxlength="22"></label>

        <!--字符串匹配一般使用正则表达式,pattern-->
        <!--required为必填-->
        <!--size设置输入框的长度,maxlength限制可输入的最大字符长度-->

        <br><br>
        <input type="submit" value="提交">
    </form>
    <datalist id="tellist">
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
    <!--关联到电话的list-->
    </datalist>
</body>
</html>

多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input实现文件上传</title>
</head>
<body>
    <form action="XXX" method="post" enctype="multipart/form-data">
        <label>请选择你要上传的文件：<input type="file" name="file" accept="image/*" multiple></label>
        <textarea name="saysth" rows="5" cols="30">可以输入多行文本，且可以拖拽，rols cols 设置默认大小</textarea>
        <textarea name="saysths" rows="5" cols="30" wrap="soft">CR=carriage return回车 LF=line feed换行</textarea>
        <!--soft回车不会提交，hard回车会提交-->
    <input type="submit" value="提交">
    </form>
</body>
</html>