正文

html-4,form表单输入传文件单选多选下拉菜单文本描述重置submit按钮限制输入

_王晓东  2022-02-14  757

关键词：

<!--
    form
            HTTP协议
            action:提交的服务器网址
            method:get(默认)| post(应用：登录注册、上传文件)
            页面中的a img link 默认是get请求
            
            input
                type:
                    text: 文本输入框
                    password:密码输入框
                    file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype=‘multipart/form-data‘
                    submit:提交按钮  input 中一定有submit按钮才能提交跳转等任务
                    button:普通按钮
                name:提交到服务器端的key
                value: 显示的文本内容，与服务器端的value
                placeholder：文本代替
                
            placeholder  表单内显示的灰色提示语    
            type
                text  文本输入
                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限
                        
            label   表单前的标语
                for:是与下面的某个表单控件的id属性进行关联
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--Enctype=‘multipart/form-data‘  提交文本一定给form 设置这一段-->
    <form action="" method="get" enctype="multipart/form-data">
        <!--
            placeholder  表单内显示的灰色提示语
            label        表单前的标语
            type
                text  文本输入
                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限
        -->
        <p class="user">
            <label class="user_name">用户名</label>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </p>
        <p class="pwd">
            <label class="user_pwd">用户名</label>
            <input type="text" name="password" placeholder="请输入密码">
        </p>

        <!--文件上传-->
        <p>
            <input type="file" name="mp3">
        </p>


        <!--单选  checked 默认-->
        <p>
            男：<input type="radio" name="sex" value="man">
            女：<input type="radio" name="sex" value="woman" checked>
        </p>

        <!--多选-->
        <p>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
        </p>

        <!--下拉菜单单选   selected 默认-->
        <p>
             <select name="school">
                <option value="1">小学</option>
                <option value="2">初中</option>
                <option value="3">高中</option>
                <option value="4">大学</option>
                <option selected>研究生</option>
                </select>
        </p>

        <!--描述 即文本框 可以写文字的框-->
        <p>
            <h3>我的描述</h3>
            <textarea name="" id="" cols="60" rows="10"></textarea>
        </p>

        <!--重置、限制输入数字等按钮等按钮-->
        <p class="register">
            <input type="submit" value="注册">
            <input type="button" value="普通按钮">
            <!--重置会 将所选的按钮都变为初始状态-->
            <input type="reset" value="重置">
            <!-- 只允许输入数字 -->
            <input type="number">

            <button type="button">普通按钮</button>
        </p>

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

jquery操作下拉列表以及单选多选框

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="../js/jquery-1.8.3.js"type="text/javascript"charset="utf-8"></script></head 查看详情

[html5]html表单(forms)

表单是HTML最主要的用户输入元素用户和网页的交互动作有鼠标悬停、点击链接（或移动触摸）和页面滚动等，这些交互方式一般只是服务器单向信息输出。有时候用户需要输入一些信息给服务器来完成双向交互，这类交互包括... 查看详情

单选多选(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

java通用单选多选列表（recyclerview）(代码片段)

查看详情

bootstrapdatatable项目封装支持单选多选

自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用，当然封装的还不够完美，给大家学习调侃使用介绍：query_dataTable({table : "#data_table",query : "#query"});<table... 查看详情

form表单获取与赋值

form表单中使用频繁的组件:文本框、单选框、多选框、下拉框、文本域form通过getValues()获取表单中所有name的值通过setValues({key:values})给对应的name值进行赋值，其中key对应的name值在给单选框和多选框赋值时，有几个疑惑的地... 查看详情

html中select标签单选多选详解

select元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将<select>表单数据提交给服务器时包括name属性。一、基本用法：<select&g... 查看详情

单选多选post值到控制器处理

<td> <labelclass="checkbox"> <inputtype="hidden"name="orderBy"value="<?=$val[‘orderBy‘]?>"> <inputclass="check"name="house 查看详情

jquery中其他

hide: 隐藏$(‘img‘).hide(); show:显示$(‘img‘).show(); 单选多选下拉菜单选中状态checked($(‘.radio:checked‘));单选($(‘.checkbox:checked‘));多选($(‘.option:checked‘));下拉multiple="multiple"下拉列表只能单选设置为可以多选<sel 查看详情

form表单介绍

参考技术A表单在web应用中主要是用来进行数据收集的，将用户的输入通过表单收集后传给服务端常用的input标签：type=text：输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮... 查看详情

jquery小练习单选多选二级联动员工信息的添加与删除

单选多选与全选就是点击按钮从左边把内容一道右边<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>< 查看详情

vue-element动态单选多选全选(代码片段)

实现效果如图数据格式如下：pps:["code":"6","createTime":"2018-09-0700:00:00","des":"可选择居住情况","id":"6","key":"liveType","multi":false,"name":"居住情况","no":1,"status":1,"updateTime":"2018-09-0700:00:00","usages":["con 查看详情

深入浅出flask(16)：h-ui前端框架的单选多选开关控件

...选按钮和开关控件，就是这种最常用的控件，也是让数据输入可视化的基础，让用户一目了然的查看详情

it小鲜肉widgetstree单选多选相关回调函数获取选中的节点功能

...了我一个1个多小时，主要为IT小鲜肉WidgetsTree控件添加了单选、多选、选择前和选择后两个回调函数、获取选中节点的功能。后面会继续努力完善这个树控件。 1.通过设置初始化时候的选项{select:true}开启单选，通过设置初始... 查看详情

unity实战100例unity万能答题系统之单选多选判断题全部通用

目录一：题库的配置和处理1.配置表格题库2.切换表格为CSV或者TXT格式查看详情

jquery获取列表中的值和input单选多选框控制选中与取消

一、Jquery获取列表中的值二、input多选框控制选中1$(‘#clearbtn‘).click(function(){2varboxes=$("input[type=‘checkbox‘]");3for(i=0;i<boxes.length;i++){4boxes[i].checked=false;5}6}); 查看详情

angularselect2下拉单选和多选的取值赋值

官网：http://select2.github.io/examples.html兼容性：引入文件/select2.min.js/select2.min.csshtml<selectclass="form-controlselectName"multiple="multiple">//设置class名为selectName;配置为多选multiple<optionvalue="1 查看详情

单选多选样式写法(代码片段)

...ransition:colorease.3s;input[type=checkbox]:checked+label:beforecolor:#000;单选按钮样式//html<divid="box"><inputtype="radio"id="check"name="check"/><labelfor="check">Checkbox</label></div>//cssinput[type=radio]display:none;input[ 查看详情