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