美文网首页
form标签和table标签

form标签和table标签

作者: desperadokk | 来源:发表于2018-12-23 10:18 被阅读0次

    form标签

    跳转页面(HTTP POST请求),和a标签是一对,a标签有的餐素form标签也有。
    如果form表单里面没有提交按钮,那就无法提交这个form。

    1. input标签
    <form action="users" method="post">
      <input type="button" value = "提交">
      <input type="submit" value = "提交">
      <button>提交<button>
    </form>
    

    type是button时只是个普通按钮,点击不能提交;type是submit时可以提交;如果form里只有一个按钮,那button按钮自动升级为提交按钮。

    喜欢的水果
    <input type="checkbox" id="xxx" name="fruit" value="orange">
    <label for="xxx">橘子</label>
    /*老司机写法
    <label><input type="checkbox" name="fruit" value="orange">爱我</label>
    

    label标签通过for和input的id关联,实现点击文字也能实现勾选的功能。所有需要提交内容的input标签都要加上name属性,否则不会向服务器提交该内容。向服务器提交的内容是name➕value,比如fruit=orange。

    <label><input type="radio" name="sex" value="male">男</label>
    <label><input type="radio" name="sex" value="female">女</label>
    

    type为radio时,name相同时是一对单选框。type为radio和checkbox这种input不输入内容的需要提供value值,告诉服务器你提交的内容,sex=male或者sex=female。value值跟type是password的输入框内输入的内容是同等的。

    <select name="city">
            <option value="beijing" disabled>北京</option>
            <option value="shanghai" selected>上海</option>
            <option value="hangzhou">杭州</option>
          </select>
    

    disabled默认不能选择,selected默认选项。

    <textarea name="article" style="resize:none; width: 200px; height: 100px">
             多行文本,注意和 type=text的区别
          </textarea>
    

    textarea通过css控制输入框大小,否则可以自由拉伸。

    table标签

    <table border=1>
            <colgroup>
            <col width=100>
            <col bgcolor=red width=200>
            <col width=100>
            <col width=70>
        </colgroup>
            <thead>
                <tr>
                    <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th></th><td>小明</td><td>1</td><td>94</td>
                </tr>
                <tr>
                    <th></th><td>小红</td><td>2</td><td>96</td>
                </tr>
                <tr>
                    <th>平均分</th><td></td><td></td><td>95</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>总分</th><td></td><td></td><td>190</td>
                </tr>
            </tfoot>
        </table>
    
    <style>
            table {
                border-collapse: collapse;
            }
        </style>
    

    相关文章

      网友评论

          本文标题:form标签和table标签

          本文链接:https://www.haomeiwen.com/subject/ouyvkqtx.html