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