表单、常用表单元素

黄良钵

分类: 程序开发 588 0

常用表单元素

表单:

HTML部分:

    <body>
       <form action="#">
           <!--action url规定当提交表单时向何处发送数据-->
           <label for="account">账号:</label>
           <!--点击label可以使与其关联(通过id)的文本获得焦点-->
           <input type="text" id="account" name="account" placeholder="请输入你的账号">
           <!--name属性用于对提交到服务器后的表单数据进行标识 或者在客户端通过
           JavaScript引用表单数据 只有设置了name属性的表单元素才能在提交
           表单时传递它们的值-->
           <!--placeholder 设置文本框提示文字 文本框的默认字号比正常字号小一点-->
       </form>
    </body>

css部分:

            *{
                /*-moz-box-sizing: border-box;*/
            }
            body{
                background-color:red;
            }
            input{
                border:1px solid lightgreen;
                padding: 3px 7px;
                height: 30px;
            }
            input:hover,input:focus{
                /*:focus表示具有焦点的标签*/
                background-color: #3366cc;
                box-shadow: inset 0px 0px 4px gray;
            }

常用表单元素:

HTML部分:

    <body>
        <form action="#">
            <fieldset>
                <!--fieldset元素可将表单内的相关元素分组-->
                <!--<legend> 标签为 fieldset 元素定义标题。-->
                    <legend>请选择</legend>
                <div>
                    <!--radio定义单选按钮。checked规定此 input 元素首次加载时应当被选中-->
                    <input type="radio" id="boy" name="ismale" checked>
                    <label for="boy">男孩</label>
                    <input type="radio" id="girl" name="ismale" checked>
                    <label for="girl">女孩</label>
                </div>
                <div>
                    <!--checkbox定义复选框-->
                    <input type="checkbox" id="html5" name="skill" checked>
                    <label for="html5">HTML5</label>
                    <input type="checkbox" id="css3" name="skill">
                    <label for="css3">css3</label>
                    <input type="checkbox" id="javaScript" name="skill">
                    <label for="javaScript">javaScript</label>
                </div>
            </fieldset>
            <div>
                <!--select元素创建单选或多选菜单-->
                <!--multiple规定可以选择多个项目-->
                <select name="skill" id="skill" multiple size="3">
                    <!--option元素定义下拉列表中个的一个选项-->
                    <!--selected在首次显示列表中 表现为选中状态-->
                    <optgroup label="技能">
                        <option value="1">HTML5</option>
                        <option value="2" selected>CSS3</option>
                        <option value="3" selected>JS</option>
                        <option value="4">PHP</option>
                    </optgroup>
                    <optgroup label="LOL">
                        <option value="5">德玛西亚</option>
                        <option value="6">维恩</option>
                    </optgroup>
                </select>
            </div>
            <!--textarea标签定义多行的文本输入框-->
            <!--cols规定文本区域的宽 rows规定文本区内的可见行数-->
            <textarea name="text" id="text" cols="20" rows="10"></textarea>
            <!--火狐下  cols 规定文本区域的宽 cols + 1(滚动条显现的情况下)
           rows 规定文本区域的可见行数 rows + 1 -->
        </form>
    </body>

CSS部分:

            select{
                width:250px;
                height: 250px;
                border:10px solid red;
                padding: 5px;
                resize: both;
                /*resize属性规定是否可由用户调整元素的尺寸*/
            }
            optgroup{
                font-style: normal;
            }
            /*optgroup:before{
                content:'---------------------';
            }*/
            optgroup:after{
                content:'---------------------';
            }
            fieldset{
                margin: 0;
                border-width: 1px;
            }
            textarea{
                /*resize:none;*/
                 /*none; 用户无法调整元素的尺寸。
                    both用户可调整元素的高度和宽度。
                    horizontal用户可调整元素的宽度。
                    vertical用户可调整元素的高度。*/
                /*font-size:3rem;*/
                /*改变字号会连带造成多行文本框变大*/
                overflow: scroll;
            }

演示效果:

表单

常用表单元素

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
常用表单元素、表单

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “表单、常用表单元素”

Loading...