• JSP中必用的HTML元素_表单


    • 表单的渲染

      在页面设计时,一方面页面可能只是用来收集数据的,即表单控件以空白的形式渲染在客户端;另一方面则需要页面展示并最终还是为收集数据,即常见的具有修改功能页面。

      上一篇笔记了表单控件的使用,这一篇笔记在JSP中渲染表单各控件时的基本方式,下面是代码:

    <!DOCTYPE html>
    <!-- 表单的数据渲染 -->
    <html>
    <head>
    <meta charset="UTF-8">
    <title>表单数据的渲染,假设这是一个jsp文件,已经的转发过来Bean数据模型</title>
    </head>
    <body>
        <form method="post" action="run">
            <p>
            你的名字?<input type="text" name="name"  size="25" value="user.getName"/><!-- user可以直接填充值 -->
            你的e-mail<input  type="text" name="emall" size="25" value="user.getEmail"/>
            </p>
            
            <p>
                请检查所有支付:<br>
                <!-- <%  if(user.getLikeit().equals("00")){ %> -->    <!-- 需要根据现有数据来决定输出的控件哪一个应该被选中 --> 
                <input type="checkbox" name="likeit" checked="checked" value="00"/>我真的喜欢你网站<br/>
                <!-- <% }else{%> -->
                <input type="checkbox" name="likeit" value="00"/>我真的喜欢你网站<br/>
                <!-- <% } %> -->
                <!-- <% if(user.getLikeit().equals("11"){) %> -->
                <input type="checkbox" name="likeit" checked="checked" value="11"/>是我见过的最好的站点</br>
                <!-- <% }else{%> -->
                <input type="checkbox" name="likeit"  value="11"/>是我见过的最好的站点</br>
                <!-- <% } %>-->
                <!-- <% if(user.getLikeit().equals("22")){%> -->
                <input type="checkbox" name="likeit" checked="checked" value="22"/>是吗</br>
                <!-- <% }else{ -->
                <input type="checkbox" name="likeit" value="22"/>是吗</br>
                <!-- <% } %> -->
            </p>
            
            
            <p>
                选择最喜欢的一件事物<br/>
                <!-- <% if(user.getLovebest().equals("me")){%> -->    <!-- 需要根据现有数据决定那一个控件将被作为选中状态进行渲染 -->
                <input type="radio" name="lovebest" value="me" checked="checked"/>我自己</br>
                <!-- <%}else{ -->
                <input type="radio" name="lovebest" value="me" />我自己</br>
                <!-- <%} -->
                <!-- <% if(user.getLovebest().equals("cat")){ -->
                <input type="radio" name="lovebest" value="cat" checked="checked">我家的猫</br>
                <!-- <% }else{ %> -->
                <input type="radio" name="lovebest" value="cat">我家的猫</br>
                <!-- <% }%> -->
            </p>
            
            <p>
                <select size="1" name="potentail"> <!-- 根据当前数据确定要输出的下拉控件中被默认选中的是哪个 -->
                    <!-- <% if(user.getPotentail().equals("确定一下")){ %> -->
                    <option selected="selected">确定一下</option>
                    <!-- <% }else{%> -->
                    <option >确定一下</option>
                    <!-- <% } %> -->
                    <!-- <%if(user.getPotentail().equals("十万")){ %> -->
                    <option selected="selected">十万</option>
                    <!-- }else{ -->
                    <option>十万</option>
                    <!-- } -->
                    <!-- <% if(user.getPotentail().equals("百万")){%> -->
                    <option selected="selected">百万</option>
                    <!-- <% }else{%> -->
                    <option >百万</option>
                    <!-- <% } %> -->
                    <!-- <% if(user.getPotentail().equals("今天不了")){%> -->
                    <option selected="selected">今天不了</option>
                    <!-- <% }else{%> -->
                    <option >今天不了</option>
                    <!-- <% } %> -->
                </select>
            </p>
            
            <!-- 将数据模型直接在标签体的位置输出即可 -->
            <textarea name="comments" rows="4" cools="55" ><!-- <%=user.getContent()%> --></textarea></br>
            
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
            
        </form>
        
    </body>
    </html>
    View Code

      其实我应该写jsp实例的,但是为了简便,就写了伪代码。当然还可以是js的方式,但是一直做后端所以对js没有花费过精力。

  • 相关阅读:
    Django——model(建表,增删改查,外键,多对多)
    Django——model中的参数
    Django——路由系统,视图(接收文件等)
    Django——创建Django工程,app,模板语言
    前端——jQuery
    前端——DOM(添加标签,属性操作,各个事件,操作标签)
    前端——CSS
    Velocity模版自定义标签
    Velocity模版自定义标签
    Velocity模版自定义标签
  • 原文地址:https://www.cnblogs.com/10000miles/p/9326947.html
Copyright © 2020-2023  润新知