004 HTML+CSS(Class024 - 026)

[A] 表单标签

            <form action = "需要提交的网址">: 表单的最外层容器

            <input>：input标签用于手机用户信息，根据不同的type属性值，展示不同的控件。

                空间类型常用的七种：

                    type属性            含义

                    text            普通文本输入框

                    password        密码输入框

                    checkbox        复选框

                    radio           单选框

                    file            上传文件

                    submit          提交按钮

                    reset           重置按钮

　　　　　  button　　普通按钮

　　示例代码：

    <form action="#">
        <p>输入框：<input type="text"></p>  <!--普通文本输入框-->
        <p>密码框：<input type="password"></p>
        <p>可复选<input type="checkbox">S<input type="checkbox">M<input type="checkbox"></p>
        <p>请单选：<input type="radio" name="dx">男<input type="radio" name="dx">女</p>     
        <p>请输入需要上传的文件：<input type="file"></p>
        <p><input type="submit"> <input type="reset"></p>
    </form>

　　效果：

　　　　

[B] 单选框设置

　　单选框中，系统会将name属性相同的单选框选项视为一组，这一组中的选项才能实现单选.

[C] 文本框和密码框的提示语

　　在文本框和密码框的input标签中加入   placeholder = "提示语"   属性即可实现提示语

[D] 复选框实现默认勾选或者无法勾选

　　在复选框中的input标签中加入  checked或者checked = "checked"   即可实现该复选框默认是勾选的

　　在复选框中的input标签中加入   disabled或者disabled = "disabled"  即可实现该复选框暂时无法勾选

[E] 知识补充

　　1. <input> 标签必须在<form>标签内才有效；

　　2. <form action = "#"> f标签内的action的值为表单点击submit后的提交地址；

　　3. <input>标签中的内容若想要被有效提交，则input标签必须有name属性；

　　4. input按钮上的文字，通过value属性进行赋值；

[F] 表单相关标签

　　多行文本框：<textarea>

　　　　　　属性：cols = "20"  rows = "10"  控制文本框的大小

　　下拉菜单：<select>, <option>组合使用

　　　　　　示例代码：

　　　　　　　　　　<select>

           　　　　　　　　   <option>北京</option> 

　　　　　　　　　　　　<option>上海</option>

　　　　　　　　　　　　<option>深圳</option>

　　　　　　　　　　　　<option>广州</option>

　　　　　　　　　　　　<option>襄阳</option>

　　　　　　　　　　</select>

　　辅助标签：<label> 辅助标签，使得标签的可选择的范围变大，增强用户体验

　　　　　　示例代码：

　　　　　　　　 <p>

           　　　　　　　 请单选：<input type="radio" name="dx" id="man"><label for="man">男</label>

                   　　　　    <input type="radio" name="dx" id="woman"><label for="woman">女</label>

       　　　　　　 </p> 

　　　　　　结果：此时选圆圈和文字都可以选中，即有效选择范围增大了

　　　　　　　　

　　知识补充：
　　　　1. 默认选择为空，若想设置默认选项，则可设置为<option selected>北京</option> , 默认选择北京

　　　　2. 若想默认为请选择的提示，且请选择这个选项不能选，则可设置为<option selected disabled>请选择</option> ，则默认选择为  "请选择"  且该选项为灰色，无法选中

　　　　3. 默认显示的下拉菜单显示一项，若想显示多个，则可设置为<select size = "2">, 则下拉菜单默认显示两项

　　　　4. 默认只可选择下拉菜单中的一项，若想选择多个，则可设置为<select multiple>, 则可通过shift选择多个文件

　　　　　　【注】multiple属性不仅可以在select标签中存在，也在input标签中存在