扫一扫,加我们为好友有惊喜哦~
-->

核心课程
开班动态
专题服务

您当前所在位置:首页 > 中心动态 >>
网页中的表单

 1、表单

A、输入框
<input type="text" size="10" maxlength="20" value="管理员" readonly="readonly" disabled="disabled"/>
size:输入框可视化的长度
maxlength:输入框可以输入的字符个数
value:输入框默认显示的内容
readonly:输入框只读
disabled:输入框失效
 
注意:表单中所有的控件都需要起名字,且名字不能一样!
 
B、提交、重置按钮
 <input type="submit" value="提交">
 <input type="reset" value="重置">
 
C、表单:将一系列控件集中,提交和重置的时候提交和重置本表单中所有控件!
    <!-- 表单所需要提交的目的页面 -->
    <form action="form.html" method="post">
      用户名:<input type="text" size="10" maxlength="20" name="username"/>
 <br>
 昵称:<input type="text" size="10" maxlength="20" name="nickname"/>
 <br>
 密码:<input type="password" name="pwd" />
 <br>
 
 <input type="submit" value="提交">
 <input type="reset" value="重置">
 
</form>
 
 
action:提交的目的页面
method:get——将表单的值以url传参数的方式(?)带到后台(默认)
        post——以数据打包的方式将参数带到后台
 
D、单选框:<input type="radio" name="" value=""/>
   注意:一组单选框必须name一样,value不一样!
 
例子:
      性别:<input type="radio" name="xingbie" value="nan" id="m"  checked="checked">
       <!-- 点击男性,选中id="m"的单选框 -->
       <label for="m">男性</label>  
 
       <input type="radio" name="xingbie" value="nv" id="f">
       <label for="f">女性</label>
 
点击文字,选中单选框:a、在文字上加label标签,写for="m"
                      b、在需要被选中的单选框上加id="m"
 
默认选中:checked="checked"
 
E、复选框:跟单选框几乎一样
 明星:<input type="checkbox" name="star" value="zhouxingchi" checked="checked" id="s1"/>
       <label for="s1">周星驰</label>
       <input type="checkbox" name="star" value="liu" id="s2"/>
<label for="s2">刘德华</label>
<input type="checkbox" name="star" value="mo" id="s3"/>
<label for="s3">莫文蔚</label>
<input type="checkbox" name="star" value="xun" id="s4"/>
<label for="s4">周迅</label>
 
 
 
F、下拉菜单
      国家:<select name="guojia">
               <option value="cn">中国</option>
  <option value="mg">美国</option>
  <option value="hg">韩国</option>
  <option value="cx" selected="selected">朝鲜</option>
       </select>
 
 
G、文本域
 <textarea rows="20" cols="60" name="comment">说点什么吧...</textarea>
 rows:行
 cols:列
 
H、隐藏域:向后台传递参数
<input type="hidden" name="username" value="zhangsan" />
 
I、上传控件
上传靓照:<input type="file" name="photo"/>
 

精彩文章推荐
javascript中常见的事件[2012-12-9]
html中的多媒体标签[2012-10-30]
室内设计的发展趋势![2012-10-22]
Struts中的国际化——常州电脑培训[2012-7-7]
Ajax详解——常州电脑培训[2012-7-6]
常见的排序算法[2012-6-12]
常州网络营销培训-博客营销[2011-12-16]
常州电脑培训|Photoshop工具面板技巧[2011-11-11]


返回顶部