3.18 form表单元素

form表单元素

文本类：文本框value是提交内容，按钮value是按钮显示的字

<form action="11.html"  method="get"> get安全性差，提交内容都能看见，post相反 
<input type="text" name="a" value="111111" name="b"/> 文本框 
<input type="password" value="111" name="p"/> 密码框，内容输入是隐藏的 <input type="hidden" name="sd" value="yyy"/> 隐藏域，看不到
<textarea name="t">文本域</textarea> 双标签，内容写在中间
<input type="submit" value="按钮" /> 
</form>

post 显示提交内容密码框显示密码框用post提交

 <form action="11.html" method="get"> 
 <input type="button" value="普通按钮" />       没有提交作用，value是显示的
<input type="submit" value="提交按钮" />         value是显示的
<input type="reset" value="重置按钮" />            value是显示的
<input type="image" src="无标题.png" />    图片按钮    value不是用来显示的

 </form>

选择按钮：

<form action="11.html" method="get">
  <input type="radio" value="nan" name="n" id="1" />男
  <input type="radio" value="nv" name="n" />女          name需要相同才能单选
<label for="1">男</label>               点击男字就可以选中


 <input type="checkbox" value="" name="c" />            复选框
 <input type="checkbox" value="" name="c" />
 <input type="file" />           浏览，选择文件
<select>                                 下拉列表
  <option>北京</option>                           
  <option selected="selected">上海</option>     默认选中加selected="selected"
  <option>深圳</option>
</select>

</form>

这是浏览，选择文件　　这是下拉列表

其他属性：

readonly="readonly"   只读，只能读
disabled="disabled"    不可用，不能提交，例：同意协议才能选定
hidden="hidden"         隐藏
checked="checked"     复选框默认选中
selected="selected"    用在下拉列表，设置默认选中

框架：

<iframe src="afasdasd.html" scrolling="no" frameboder="0" width="300" height="200">   可以嵌入页面 scrolling有无滚动条
 </iframe>

<frameset cols="200,*" >                    有frameset不能用body  *代表剩下的
    <frame src="asdsad.html">
  
</frameset>

　　200，* 效果图

<body>
   <marquee direction="right" behavior="scroll" scrollamount="20">
   内容文字</marquee>   滚动默认右往左 right左往右      behavior=scroll是走一圈                             
scrollamount=20  是走动速度
   <hr>
   中国银行<mark>股市<mark>崩盘  突出显示
   </hr>      分隔线
</body>

hr分割线效果图

样式：

内联的
  <head>
  </head>
  <body>
       <div style="200px; height:100px;">这是内联</div>
 </body> 
      内联  style="........" 
      优点：控制精确
      缺点：代码重用性差

内嵌的
<head>
    <style type="text/css">
    a{
         200px;
         height:100px;

        }
   </style>

  </head>
  <body>
       <div class="a"></div>
  </body> 
  优点：代码重用性比内联好
  缺点：控制不精确

<head>
    <style type="text/css">
    #b {
         200px;
         height:100px;
          }
    .a{ 
           backgroung-color:#903;
       }
    span{ 
                color:red;
             }
   #b,span{background-color:#0F0;}
   </style>

  </head>
  <body>
       <div id="b">背景</div>
       <div class="a">背景1</div>
       <div class="a">背景2</div>
       <span>背景3</span>
        <span>背景3</span>
        <span>背景3</span>

  </body> 
  id用#    class用.     直接用标签
  id名不能重复，class可以重复

外部
优点：代码的重用性要更好      选择文件，新建，css,保存
缺点：控制精度最差
<head>
   

   <link href="Untitled-4.css" />   用来引css
</head>