zoukankan      html  css  js  c++  java
  • html基础4-表单/下拉列表/传输方式

    最常见的就是 注册/登陆页面,就是一个表单

    主要用于收集用户信息,和服务器交互

    input标签,和所有输入相关的都是input,单标记

    账号密码输入框,按钮,单选,复选

    输入型:text/password

    按钮型:submit reset button(配合js自定义使用)

    起的是按钮的作用

     能看到,submit按钮内置了提交功能,用的是get方法

    <body>
    
        <h1 align="center">注册信息</h1>
    
        <form>
            <!-- 使用table来排版 -->
            <!-- 姓名:<input type="text" name=""> -->
    
    
            <table align="center">
                
                <!-- 文本框 -->
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="username" placeholder="请输入用户名"></td>
                </tr>
    
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email" value="@qq.com" ></td>
                </tr>
    
                <!-- 密码框 -->
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" placeholder="请输入密码"></td>
                </tr>
    
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password2" name="password2" placeholder="请再次输入密码"></td>
                </tr>
    
                <!-- 文件域 -->
                <tr>
                    <td>上传照片:</td>
                    <td><input type="file" name="file"></td>
                </tr>
    
                <!-- 单选 -->
                <tr>
                    <td>性别:</td>
                    <td>
                        <!-- 被选择的单选框,value值会传送的服务器上,所以value是唯一区分 -->
                        <!-- 同一个类型的单选框,name要一致 --><input type="radio" name="sex" value="man"><input type="radio" name="sex" value="woman">
                    </td>
                </tr>
    
                <!-- 复选 -->
                <tr>
                    <td>爱好:</td>
                    <td>
                        <!-- 选择的话会传相应的value值,因为是复选,同一类型下name基本没有区分的用 -->
                        <!-- name是用于不同类型的复选之间的区分的 比如爱好/运动 -->
                        阅读<input type="checkbox" name="" value="read">
                        跳舞<input type="checkbox" name="" value="dance">
                        唱歌<input type="checkbox" name="" value="sing">
                    </td>
                </tr>
    
                <!-- 按钮 -->
                <tr>
                    <td>操作:</td>
                    <td>
                        <!-- value是显示的内容 -->
                        <input type="button" name="" value="点我">
                        <input type="submit" name="">
                        <input type="reset" name="">
                    </td>
                </tr>
    
            </table>
    
        </form>
    
    </body>

    用来代替单选和复选框

    <select>
                            <option value="cd">成都</option>
                            <option value="bj">北京</option>
                            <option value="nj">南京</option>
                            <option value="hz">杭州</option>
                        </select>

    分组的下拉菜单

    <select name="city">
                            <!-- value才是传到服务器的,label只是展示 -->
                            <optgroup label="江浙沪">
                                <option value="nj">南京</option>
                                <option value="hz">杭州</option>
                                <option value="sh">上海</option>
                            </optgroup>
                            <optgroup label="川渝">
                                <option value="cd">成都</option>
                                <option value="cq">重庆</option>
                            </optgroup>
                        </select>

    多行文本域

    <tr>
                    <td>简介:</td>
                    <td><textarea placeholder="请输入个人信息"></textarea></td>
    
                </tr>

    以后估计会使用AJAX来传,这种方式过时了吧

  • 相关阅读:
    并发
    基础概念总结
    Tomcat总结
    JVM总结
    Spring事务管理
    数据结构和算法
    拦截器
    关于XML fragments parsed from previous mappers already contains value for错误的探索
    zookeeper比较好的学习地址
    关于idea中的maven打包
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9350069.html
Copyright © 2011-2022 走看看