java--html(5)表单

来源：互联网发布：网络明星孤烟暮蝉编辑：程序博客网时间：2024/06/05 09:06

表单标签是最常用的标签，用于与服务器端的交互。
< input>：输入标签
        接收用户输入信息。其中的type属性指定输入标签的类型。
        文本框 text。输入的文本信息直接显示在框中。
        密码框 password。输入的文本以原点或者星号的形式显示。
        单选框 radio 如：性别选择。
        复选框 checkbox 如：兴趣选择。
        隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
        提交按钮 submit 用于提交表单中的内容。
        重置按钮 reset 将表单中填写的内容设置为初始值。
        按钮 button 可以为其自定义事件。
        文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
        图像 image 它可以替代submit按钮。
< select>：选择标签
        < select name=”lang”>
                < option value=”none”> –请选择语言–< /option>
                < option value=”java” selected=”selected”> JAVA < /option>
                < option value=”c”> C语言 < /option>
        < /select>
< textarea>：多行文本框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>我的演示--表单form</title></head><body>    <h2>演示表单</h2>    <form >                           姓名:<input type="text" name="name" value=""/><br/><!-- text:编辑框，相当于JTextField,,name属性:后台处理数据需要,,value:文本值,封装向后台提交的信息-->                          密码:<input type="password" name="pwd" value=""/><br/><!-- password:密码框,相当于JPasswordField,文本以原点或者星号的形式显示,,name属性:后台处理数据需要,,value:文本值,封装向后台提交的数据-->                          性别:<input type="radio" name="sex" checked="checked" value="male"/>男<!-- radio:相当于JRadioButton,,name属性:后台处理数据需要,,value:选项值,封装向后台提交的数据-->            <input type="radio" name="sex" value="female"/>女<br/><!-- radio:单选框,相当于JRadioButton,,name属性:后台处理数据需要,,value:选项值,封装向后台提交的数据-->                          <!-- name="sex"取值一样，形成互斥 -->                         专业:<input type="checkbox" name="tech" value="none"/>选择所有<!-- checkbox:复选框,,name属性:因为要传到后台，所以最好是英文字符,,value:选项值,封装向后台提交的数据 -->            <input type="checkbox" name="tech" value="java"/>java            <input type="checkbox" name="tech" value="c/c++"/>c/c++            <input type="checkbox" name="tech" value="c#"/>c#            <input type="checkbox" name="tech" value="html"/>html<br/>                          <!-- name="hncu"取值一样,方便后台取值时能得到checkbox所有信息-->        <input type="hidden" name="hid"/><!-- hidden:隐藏字段(隐藏针),,在页面上不显示,但在提交的时候随其他内容一起提交 -->                        语言:<select name="lang"><!-- 选择标签:设置默认java -->                 <option>请选择...</option>                           <option value="java" selected="selected">java</option>                           <option value="c/c++">c/c++</option>                           <option value="c#">c#</option>                      </select><br/>                         简介:<textarea rows="10" cols="20" name="instroduce">要求字数不少于200!</textarea><br/><!-- 多行文本框,超过10行则显示滚动条,每行20个字符 -->        <input type="submit" value="提交"/><!-- 提交按钮 -->                 <input type="reset" value="重置"/><br/><!-- 重置按钮:还原到最原始状态 -->        <input type="button" value="点一下" onclick="alert('no no no...')"><br/><!-- value:按钮显示,,onclick:会弹出窗口alert('no no no...'):设置窗口上显示的信息-->        <input type="image" src="4.jpg" width="100" height="50" onclick="alert('no no no...')"><br/><!-- value:按钮显示,,onclick:会弹出窗口alert('no no no...'):设置窗口上显示的信息-->                         上传文件:<input name="attach_file" type="file"  value=""/><br/>                        <br/>    </form></body></html>

这里写图片描述
表单组件格式化
用表格标签< table>对表单中的组件进行格式化。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>我的演示--表单form</title></head><body>    <h2>演示表单格式化</h2>    <form >         <table cellspacing="3" ><!-- border="1" cellspacing="3" -->         <tr>            <th colspan="2" align="center">注册表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>         </tr>         <tr>            <td>姓名:</td> <td><input type="text" name="name" value=""/></td>         </tr>         <tr>                              <td>密码:</td> <td><input type="password" name="pwd" value=""/></td>         </tr>         <tr>            <td>性别:</td><td><input type="radio" name="sex" checked="checked" value="male"/>男                   <input type="radio" name="sex" value="female"/>女</td>         </tr>         <tr>            <td> 专业:<td><input type="checkbox" name="tech" value="none"/>选择所有            <input type="checkbox" name="tech" value="java"/>java            <input type="checkbox" name="tech" value="c/c++"/>c/c++            <input type="checkbox" name="tech" value="c#"/>c#            <input type="checkbox" name="tech" value="html"/>html</td>         </tr>         <tr>            <td>语言:</td> <td><select name="lang">                                  <option>请选择...</option>                                            <option value="java" selected="selected">java</option>                                            <option value="c/c++">c/c++</option>                                            <option value="c#">c#</option>                                       </select></td>         </tr>         <tr>            <td valign="top">简介:</td><td><textarea rows="10" cols="20" name="instroduce">要求字数不少于200!</textarea></td>         </tr>         <tr>             <td colspan="2" >&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/></td>         </tr>         <tr>            <td><input type="button" value="点一下" onclick="alert('no no no...')"></td>            <td><input type="image" src="4.jpg" width="100" height="50" onclick="alert('no no no...')"></td>        </tr>        <tr>           <td>上传文件:</td> <td><input name="attach_file" type="file"  value=""/></td>        </tr>        </table>                                     </form>                        <br/>                        <br/>                        <br/>                        <br/></body></html>

这里写图片描述

0 0