• HTML表单设计


    1.表单标记——<form>...</form>

    (1)<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单的内容

    (2)基本格式

    <form action="服务器地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>

    (3)常用属性

    name属性  表单名称

    method属性  传送数据的方式,分post和get方式

    get方式:get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性

    post方式:post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制

    action属性  表单数据的处理程序的URL地址

    如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为"no"

    enctype属性  设置表单的资料的编码方式

    target属性  和超链接的属性类似,用来指定目标窗口

    2.文本域和密码——<input>标记

    (1)<input>标记没有结束标记,是一个单标记

    (2)基本语法

    <input type="" name="" value="" size="" maxlength="">

    (3)属性介绍

    type属性

    type属性有两个值:text和password

    当type="text"时,<input>表示一个文本输入域

    当type="password"时,<input>表示一个密码输入域

    name属性  定义控件的名称

    value属性  初始化值,打开浏览器时,文本框中的内容

    size属性  设置控件的长度

    3.提交、重置、普通按钮

    (1)提交按钮

    当<input type="submit">时,为提交按钮

    (2)重置按钮

    当<input type="reset">时,为重置按钮

    (3)普通按钮

    当<input type="button">时,为普通按钮

    4.单选框和复选框

    (1)单选框

    当<input type="radio">时,为单选框

    (2)复选框

    当<input type="checkbox">时,为复选框

    (3)注意

    单选框和复选框都可以使用"checked"属性来设置默认选中项

    5.隐藏域

    当<input type="hidden">时,为隐藏表单域

    6.多行文本域

    (1)作用:使用<textarea>标记可以实现一个,能够输入多行文本的区域

    (2)语法格式

    <textarea name="name" rows="value" cols="value" value="value">... ...</textarea>

    (3)rows属性和cols属性分别用来指定显示的行数和列数,单位是字符个数

    7.菜单下拉列表域——<select>标记

    (1)语法格式

    <select name="" size="value" multiple>
        <option value="value" selected>选项1</option>
        <option value="value">选项2</option>
        <option value="value">选项3</option>
        ... ...
    </select>

    (2)属性

    name属性  规定下拉列表的名称

    size属性  规定下拉列表中可选项的数目

    multiple属性  规定可选择多个选项

     (3)option标记

    <option>标记用来指定列表中的一个选项,需要放在<select></select>之间

    value属性  给选项赋值,指定传送到服务器上的值

    selected属性  指定默认的选项

    8.举例说明

    举例展示会员注册登陆填写信息

    注册代码demo.html:

     1 <html>
     2     <head>
     3         <meta charset="UTF-8">
     4         <title>会员注册</title>
     5     </head>
     6     <body>
     7         <center>
     8         <form name="注册" method="get" target="_self" action="demo2.html">
     9             设置账号:<input name="zhanghao" type="text" value="" maxlength="10">
    10             <br/>
    11             <br/>
    12             设置密码:<input name="mima" type="password">
    13             <br/>
    14             <br/>
    15             确认密码:<input name="mima" type="password">
    16             <br/>
    17             <br/>
    18             <input type="submit" value="提交">
    19             &nbsp;&nbsp;&nbsp;&nbsp;
    20             <input type="reset" value="重置">
    21             <br/>
    22             <br/>
    23         </form>
    24         </center>
    25     </body>
    26 </html>
    View Code

    登陆代码demo2.html:

     1 <html>
     2     <head>
     3         <meta charset="UTF-8">
     4         <title>会员登陆</title>
     5     </head>
     6     <body>
     7         <center>
     8         <form name="登陆" method="get" target="_self" action="demo1.html">
     9             请输入你的账号:<input name="zhanghao" type="text" value="" maxlength="10">
    10             <br/>
    11             <br/>
    12             请输入你的密码:<input name="mima" type="password">
    13             <br/>
    14             <br/>
    15             <input type="submit" value="提交">
    16             &nbsp;&nbsp;&nbsp;&nbsp;
    17             <input type="reset" value="重置">
    18             <br/>
    19             <br/>
    20         </form>
    21         </center>
    22     </body>
    23 </html>
    View Code

    填写信息demo1.html:

     1 <html>
     2     <head>
     3         <meta charset="UTF-8">
     4         <title>个人信息登记</title>
     5     </head>
     6     <body>
     7         <form action="demo.html" target="_self" name="信息登记" method="get">
     8             <center>
     9             姓名:
    10             <input name="name" type="text" size="4">
    11             <br/>
    12             <br/>
    13             性别:
    14             <input type="radio" name="sex" checked>15             <input type="radio" name="sex">16             <br/>
    17             <br/>
    18             年龄:
    19             <select>
    20                 <option>1-10</option>
    21                 <option>11-20</option>
    22                 <option>21-30</option>
    23                 <option>31-40</option>
    24                 <option>41-50</option>
    25                 <option>51-60</option>
    26                 <option>61-70</option>
    27                 <option>71-80</option>
    28             </select>
    29             <br/>
    30             <br/>
    31             爱好:
    32             <input type="checkbox" name="running">跑步
    33             <input type="checkbox" name="swimming">游泳
    34             <input type="checkbox" name="learning">学习
    35             <input type="checkbox" name="basketball">篮球
    36             <br/>
    37             <br/>
    38             个人说明:
    39             <textarea name="personal description" rows="10" cols="50"></textarea>
    40             <br/>
    41             <br/>
    42             <input type="submit" value="提交">
    43             &nbsp;&nbsp;&nbsp;&nbsp;
    44             <input type="reset" value="重置">
    45             &nbsp;&nbsp;&nbsp;&nbsp;
    46             <input type="button" value="按钮">
    47             </center>
    48         </form>
    49     </body>
    50 </html>
    View Code

    效果展示:



  • 相关阅读:
    实现一个聊天功能的对话框
    一些关于搭建服务器的方法
    JavaScript全局变量和局部变量的区别
    GIT常用命令
    Android 去除最上面应用名称及图标
    Fragment的隐藏与显示
    多线程断点续传及下载
    android 断点下载---XUtils
    Android判断网路是否畅通加权限
    Android_按两次返回键退出程序和长按返回键退出程序
  • 原文地址:https://www.cnblogs.com/muzidaitou/p/11313417.html
Copyright © 2020-2023  润新知