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

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq814965130/article/details/78639280
文章标签: WEB前端
个人分类: 前端
想对作者说点什么? 我来说一句

RadioGroup单选按钮排版

k183000860 k183000860

2015-06-18 19:01:46

阅读数:985

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭