关闭

WEB前端 -- 单选按钮、下拉、隐藏、表单

标签: WEB前端
78人阅读 评论(0) 收藏 举报
分类:

1.单选按钮:radio

1)name是命名,value的值是提交到服务器时给后台程序看的

男:<input type="radio" name="sex"/>
女:<input type="radio" name="sex" checked="checked"/>
2)需要对radio进行设置,才能只能选择一个,即将多个radio用name属性划分为一组。name相同即为一组。
男:<input type="radio"/>
女:<input type="radio"/>

如果只是如上所写type="radio"的话,这一组的radio没有产生关联,2个radio都可以选择,为设置它的唯一性,需要将有关联的radio用name进行关联

3)label:input的描述,本身不会有效果,但与其它input标签使用可提升用户的使用体验效果,即不用点击按钮,点击文字即选择所需项目的目的。需要对input设置id,再在label中的for属性中设置与id一样的名称,即将label和input进行了关联,但是提交的仍是value的值,label中的内容不会被提交。如下(通过label的for指向按钮的id进行绑定,for和id属相的值要保持一致,且label标签一般和radio、checkbox类型一起使用)

 性别:
        <label for="boy">男</label>
        <input type="radio" id="boy" name="gender"/>
        <label for="girl">女</label>
        <input type="radio" id="girl" name="gender"/>
        <br />
        <input  type="submit" value="提交"/><!-- value:设置按钮的名称,这样可以不用担心因浏览器的不同按钮显示值不一样 -->
        <input  type="reset" value="重置"/>

2.select

select下拉列表中name是select名称,value是每个下拉列表的值

1)disable

     a)用在下拉列表选择项时的效果是该选择项不可用

地区:
    <select name="area" id="" size="1">
    	<option value="1" disabled="disabled">北京</option>
        <option value="7">天津</option>
        <option value="8" selected="selected">上海</option>
        <option value="9">重庆</option>
    </select>
    b)用在select中的效果是该下拉框不可用

省份:
    <select disabled="disabled">
    	<option value="1"> 北京</option>
        <option value="2"> 上海</option>
    </select>
2)optgroup:为下拉框中的项目分组,label指定分组的名称

省份:
    <select>
        <optgroup label="中国"><!--label:指定分组的名称-->
            <option value="1"> 北京</option>
            <option value="2"> 上海</option>
        </optgroup>
        <optgroup label="国外">
            <option value="1"> 美国</option>
            <option value="2"> 纽约</option>
        </optgroup>
    </select>

3.textarea:required:必填。placeholder:默认提示内容。cols和rows规定textarea的尺寸。

                     多行文本可拖动改变大小,若不需要布局的改变,需用css进行控制,style="resize:none;"

<textarea cols="30" rows="20" placeholder="请输入内容" required></textarea><!--placeholder:默认提示。required:必填-->
<input  type="submit"/>
<br />
<textarea cols="30" rows="20" placeholder="请输入内容" maxlength="20" required>
</textarea><!--required:必填,中间用enter后相当于增加了空格,相当于在textarea中增加了内容-->
<input  type="submit"/>

4.隐藏域:定义隐藏的输入字段,用户不可看到页面中隐藏域的内容。

                   在表单中插入隐藏域的目的是收集或发送信息,以利于被处理表单的程序所使用。如为确定用户身份,可以用隐藏域。

                   隐藏域使用name和value属性来规定参数名和参数值。

<form action="">
   <input type="hidden" name="h" value="11111"/>
   <input type="submit"/>
</form>

localhost:8080/tableProject/index.html?h=11111

5.表单

表单域需要加name属性才可以把数据提交到服务器。不想提交数据的不写name,如button

0
0
查看评论

单选按钮的显示与隐藏列项

$(function(){ $("#fjgs").live("change",function(){//fjgs 单选按钮id var fjgs = $(this).val(); if(fjgs == "Y"...
  • xiaowu2017
  • xiaowu2017
  • 2017-01-12 08:31
  • 449

下拉列表、单选按钮、复选框常用用法总结

下拉列表html<select id="demoselect"> <option value="eq">相等</option> <option value="gt">大于<...
  • dora_310
  • dora_310
  • 2017-01-10 22:01
  • 1109

表单:单选框与隐藏域

单选框: 1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。 2.默认选中,:给input标签添加一个checked属性。 3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必...
  • ethunsex
  • ethunsex
  • 2017-03-12 13:56
  • 145

JSP 隐藏域 单选按钮 复选按钮

1、隐藏域的应用。
  • huang343
  • huang343
  • 2014-07-25 16:28
  • 507

用JS单选按扭隐藏切换

<br />用单选按扭实现隐藏域的切换<br /> <br />主要功能是单击男的单选按扭时,则出现男的 月吸烟花费与月喝酒花费<br /> <br />单击女的单选按扭时,则出现女的月花美费和花购衣费。<br /...
  • dearspring2009
  • dearspring2009
  • 2010-07-25 12:17
  • 2494

WEB前端 | HTML基础——(5)表格和表单

一、表格 表格 1 表格标题 <!-- border 代表的是边框,是table的属性和css里的border不一样。可以直接设置大小来给单元格、表格添加边框 cellspacing 单元格的外间距 cellp...
  • Erosvan
  • Erosvan
  • 2016-09-13 19:22
  • 1254

前端单选按钮radio的显示隐藏以及JS重置功能

相关代码: $(".ret").click(function(){ $("#r_number").val(""); $("#r_address").val(""); $("#...
  • hnczlzj
  • hnczlzj
  • 2017-03-09 22:17
  • 1699

form 单选按钮

form 单选按钮问题 加全局<label><input type='radio' name='sex'></label>
  • huojiahui22
  • huojiahui22
  • 2015-06-25 18:36
  • 217

html下拉表单实现代码

Volvo Saab  selected="selected">Fiat  //此处红色部分表示实现默认选项 Audi
  • q285661571
  • q285661571
  • 2012-04-12 23:31
  • 2979

表单“单选按钮”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     单选按钮   ...
  • luoboshi2012
  • luoboshi2012
  • 2012-07-31 08:17
  • 238
    个人资料
    • 访问:2475次
    • 积分:497
    • 等级:
    • 排名:千里之外
    • 原创:39篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类