2表单

作者: 行之北斗 | 来源:发表于2019-03-19 11:34 被阅读0次

    form 表单
    input用户输入
    type="text" 普通文本
    type="password"密码输入框
    type="email"邮箱类型 h5新增加类型
    type="file"可以选择本地文件夹下的文件
    type="radio" 单选项框 通过name属性来确定是一组
    type="checkbox"复选框
    type="submit"提交
    type="reset"重置

    HTML5以后新增的
    type="color"选择颜色
    type="date"选择日期
    type="time"选择时间(时分)
    type="datetime-local"(年月日时分)
    type="month"(年月)

    <input type="number" name="" id="" value="" min="1" max="5" step="1" />限制输入的数字
    step为1时:1、2、3、4、5
    step为2时:1、3
    step为3时:1、4

    type="range"滑块
    type="search"搜索框
    type="tel"电话号

    加入视频

    <video width="320" height="240" controls="controls">
                <source src="vedio/movie.mp4" type="video/mp4"></source>
                <source src="vedio/movie.mp4" type="video/ogg"></source>
                <source src="vedio/movie.mp4" type="video/webm"></source>
            
                当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
            </video>
    

    下拉菜单 select

    <select name="country">
                        <option>请选择:</option>
                        <option value ="中国">中国</option>
                        <option value ="美国">美国</option>
                        <option value ="英国">英国</option>
    </select>           
    

    多行文本
    <textarea rows="3" cols="30">
    </textarea>

        <form action="#" method="">
                
            
            <table border="1px" cellpadding="0px" cellspacing="0px" width="40%">
                <tr>
                    <td width="50%">个人</td>
                    <td>公司</td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td>
                         <!-- input用户输入
                         type="text" 普通文本 -->
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <!-- type="password"密码输入框 -->
                        <input type="password" />
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td>
                        <input type="password" />
                    </td>
                </tr>
                <tr>
                    <td>电子邮箱</td>
                    <td>
                        <!-- type="email"邮箱类型 h5新增加类型-->
                        <input type="email" />
                    </td>
                </tr>
                <tr>
                    <td>性质</td>
                    <td>
                        <!-- type="radio" 单选项框 通过name属性来确定是一组 -->
                        <input type="radio"name="1" value="" />个人
                        <input type="radio" name="1" value="" />公司
                    </td>
                </tr>
                
                <tr>
                    <td>爱好</td>
                    <td>
                        
                        <input type="checkbox"name="1" value="" />玩游戏
                        <input type="checkbox" name="1" value="" />看电视
                        <input type="checkbox" name="1" value="" />看电影
                        <input type="checkbox" name="1" value="" />打豆豆
                        
                    </td>
                </tr>
                
                <tr>
                    <td>上传头像</td>
                    <td>
                        <!-- type="file"可以选择本地文件夹下的文件 -->
                        <input type="file" />
                    </td>
                </tr>
                <tr>
                    <td>所属国家</td>
                    <td>
                        <!-- 下拉菜单 -->
                        <select name="country">
                            <option>请选择:</option>
                            <option value ="中国">中国</option>
                            <option value ="美国">美国</option>
                            <option value ="英国">英国</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>所属省份</td>
                    <td></td>
                </tr>
                <tr>
                    <td>所属城市</td>
                    <td></td>
                </tr>
                <tr>
                    <td>手机</td>
                    <td><input type="tel"/></td>
                </tr>
                <tr>
                    <td>固定电话</td>
                    <td><input type="text"/></td>
                </tr>
                <tr>
                    <td>想要留言</td>
                    <td>
                        <textarea rows="3" cols="30">
                            
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td><input type="submit"/></td>
                    <td><input type="reset" /></td>
                </tr>
            </table>
            </form>

    相关文章

      网友评论

          本文标题:2表单

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