表单标签制作一般的登录界面

来源:互联网 发布:mac jenkins android 编辑:程序博客网 时间:2024/05/17 07:30

表单标签简介:

功能:提交数据到某服务器

<form></form>:定义一个表单范围

   属性:action:提交到地址,默认提交到当前页面

               method:表单提交方式:get(默认)和post

                         get和post的区别:(1)get请求地址栏会携带提交的数据,post不携带提交的数据

                                                            (2)get请求安全性低,post较高

                                                            (3)get请求数据大小有限制,post没有限制

输入项:

功能:可以输入内容或者选择内容的部分

大部分的输入项使用<input type="输入项"/>,在每个输入项里面需要一个name属性

a.普通输入项:<input type="text"/>

b.密码输入项:<input type="password"/>

c.单选输入项:<input type="radio"/>

                          --需要属性name

                          --name属性值必须相同

                          --必须有一个value值

              *实现默认选中项:设置属性checked=“checked”

d.复选输入项:<input type="checkbox"/>

  --需要属性name

                          --name属性值必须相同

                          --必须有一个value值

              *实现默认选中项:设置属性checked=“checked”

e.文件输入项:<input type="file"/>

f.下拉输入项:(不是在input标签中实现)

       <select name="  ">

                 <option  value = " ">选项一</option>

                <option  value = " ">选项二</option>

       </select>

g.文本域:<textarea  cols = "10"  rows = "10">文本内容</textarea>

h.隐藏项:(不会出项在页面上,但是存在于html代码中)

               <input type = "hidden"/>

i.提交按钮:

            <input type = "submit"  value = “显示内容“  />  

j.使用图片提交:

           <input type = "image"  src= “图片路径“  /> 

k.重置按钮:

          <input type = "reset"  value = “ 重置注册“  /> 

            ---重置是回到输入项的初始状态

l.普通按钮:

            <input type = "button"  value = “    “  />

          -----和js一起使用

所有的标签字符都是在英文字符的情况下输入

举一个栗子

运行结果:




源码:

<html>
  <head>
     <title> 表单实例  </title>
  </head>
  <body>
       <font size="5"color="#000000" ><b>免费开通人人网账号</b></font>
       <form>
       <table borber="1" bordercolor="#000000">
          <tr>
          <td>注册邮箱:</td>
          <td><input type="text"/></td>
          </tr>
          <tr>
          <td> </td>       <!--单元格占位符是什么???-->
          <td>你还可以使用账号<a href="#">注册</a>或者<a href="#">手机号注册</a></td>
          </tr>
          <tr>
          <td align="right">创建密码: </td>      
          <td><input type="password"></td>
          </tr>
          <tr>
          <td align="right"> 真实姓名:</td>     
          <td><input type="text"></td>
          </tr>
           <tr>
           <td align="right">性别:</td>
          <td> <input type="radio" name="sex" value="nv"/checked=“checked”>女<input type="radio" name="sex" value="nan"/>男</td>      
          </tr>
          <tr>
          <td align="right"> 生日:</td>     
          <td>
              <select name="year">
              <option value="1991" selected="selected">1991</option>
              <option value="1992">1992</option>
              <option value="1993">1993</option>
              </select>
              <select name="month">
              <option value="1"selected="selected">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              </select>
              <select>
              <option value="1"selected="selected">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              </select>
          </td>
          </tr>
          <tr>
          <td align="right">我现在:</td>
          <td>  
          <select name="work">
          <option value="study"selected="selected">我正在上学</option>
          <option value="work">我已经工作</option>
          </select>
          </td>
          </tr>
          <tr>
          <td></td>
          <td><img src="表单标签.html/picture.gif"/></td>
          <td> <a href="#">看不清换一张</a></td>
          </tr>
          <tr>
          <td align="right">验证码:</td>
          <td><input type="text" name="yanzhengma"></td>
          </tr>
          <tr>
          <td></td>
          <td><input type="image" src="Hydrangeas.jpeg"/></td>
          </tr>
       </table>
       </form>
  </body>
</html>



1 0
原创粉丝点击