FORM表单及其属性

来源:互联网 发布:js传值给jsp页面 编辑:程序博客网 时间:2024/06/05 21:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <h1 style="text-align: center">表单form</h1>    <title>css常用选择器</title></head><body><form action="contact04.html" method="get" id="ddl">    <!--action 用来指定数据要提交到哪里去               method 指定网络请求的方式1 get请求  传递到服务端的数据以追加到url路径后的方式发送                     规则 所有数据都在?之后,多个数据以&符号进行分割                     get请求缺点   网络请求数据直接暴露在url里;敏感数据容易被窃取 属绝传输量小                     post 传递到服务端的数据隐藏在请求体里,隐藏敏感数据                     post请求的优点:传输的数据隐秘性比较好,数据传输量基本上没有什么限制-->    <!--input的类型      name属性必须添加!!!!为了正常的提交数据到服务器    text单行文本    password 密码 输入的文本一隐藏的方式显示    radio 单选框 护持的效果通过同名name来实现, value是提交数据到服务器是方便组成键值对-->    <!--tabindex=""可以更改tab键的跳转顺序-->    <!--          autocomplete 自动完成功能          autofocus 自动获取焦点          required 必填          placeholder 提示          --><!-- 能够不用table标签就别用  浏览器运行速度非常慢慢慢慢-->   <fieldset>       <legend>用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册</legend>       <table align="center">           <tr>               <td>会员名:</td>               <td><input type="text" name="name" autocomplete="on" autofocus required                       placeholder="填写会员名" value="朝思暮林" readonly="false"/> </td>               <td>(可包含a-z0-9和下划线)</td>           </tr>           <tr>               <td>密码1</td>               <td><input type="password" name="pwd" tabindex="1" autocomplete="on"/></td> <!--name属性一定要有-->               <td>(至少包含6个字符)</td> <!--tabindex="1" 这是tab键的跳转顺序-->           </tr>           </tr>           <tr>               <td>性别</td>               <td>                   <input type="radio" name="sex"/>                   <input type="radio" name="sex"/>               </td>               <td>必填</td>           </tr>           <tr>               <td>爱好</td>               <td>                   <input type="checkbox" name="hobby" value="basketball"/>篮球                   <input type="checkbox" name="hobby" value="football"/>足球               </td>               <td>必填</td>           </tr>           <tr>               <td><input type="submit"/> </td>               <td><input type="reset"/> </td>           </tr>           <tr>               <td><input type="file" name="file"/></td>           </tr>           <tr>               <td><input type="button" value="putonganniu"/></td> <!--无法跳转-->               <td><input type="image" src="../../img/qqzone.png"/> </td>               <td>                   <button>普通按钮</button>               </td>           </tr>           <tr>               <td>ez</td>               <td>                   <select name="idd" id="idd" multiple size="5"> <!--multiple可以多选-->                       <option value="1">a</option>                       <option value="2">b</option>                       <option value="3">c</option>                       <option value="4">d</option>                       <option value="4">e</option>                       <option value="4">f</option>                       <option value="4">g</option>                   </select>               </td>           </tr>           <tr>               <td colspan="3" align="center"><input type="submit"/></td>           </tr>           <tr>               <td>协议</td>               <td colspan="2">                   <textarea name="xieyi" id="" cols="15" rows="3">sssssssssssss</textarea>               </td>           </tr>       </table>   </fieldset></form><hr/><input style="text-align: center" type="text" name="nick" placeholder="请输入昵称" form="ddl"/><form action="contact04.html" method="get">    <fieldset>        <table align="center">            <tr>                <td>邮箱</td>                <td><input type="email" name="email"/></td>            </tr>            <tr>                <td>地址</td>                <td><input type="url" name="url"/></td>            </tr>            <tr>                <td>日期</td>                <td><input type="date" name="date"/></td>            </tr>            <tr>                <td>时间</td>                <td><input type="time" name="time"/></td>            </tr>            <tr>                <td>月份</td>                <td><input type="month" name="month"/></td>            </tr>            <tr>                <td>星期</td>                <td><input type="week" name="week"/></td>            </tr>            <tr>                <td>滚动条</td>                <td><input type="range" name="range"/></td>            </tr>            <tr>                <td>颜色</td>                <td><input type="color" name="color"/></td>            </tr>            <tr>                <td><input type="submit"/></td>            </tr>            <tr>                <td>下拉列表</td>                <td>                    <input id="mycar" list="cars"/> <!--datalist list两个要一样-->                    <datalist id="cars">                        <option value="BMW"></option>                        <option value="Ford"></option>                        <option value="Volov"></option>                    </datalist>                </td>            </tr>        </table>    </fieldset></form><progress value="50" max="100"></progress><meter value="9" min="2" max="10"></meter> <!--温度值--></body></html>
0 0
原创粉丝点击