前端知识之HTML----form----内部元素

深藏阁楼爱情的钟 2022-06-08 03:05 146阅读 0赞

## 1.多行文本（TextArea） ##

用于在表单中提供多行的文本输入控件  
格式：

要点：  
1.cols属性表示columns,即列，规定文本区内的可见宽度  
2.rows属性表示rows，即行，规定文本的可见行数  
3.默认可以拖放，使用CSS可禁止拖放  
textarea\{resize:none;\}

## 2.明文输入框 ##

账号：<input type="text"/>
    账号：<input type="text" value="root"/>
    //区别在于是否有默认值

## 3.暗文输入框 ##

密码:<input type="password"/>
    密码:<input type="password" value="123456"/>
    //同样，value表示是否有默认值

## 4.单选框 ##

从多个选项中选出其中一个

<input type="radio" name="danxuan" checked="checked"/>男
            <input type="radio" name="danxian"/>女
            //checked表示默认选项

## 5.多选框 ##

：

<input type="checkbox" name="duoxuan" checked="checked"/>苹果
            <input type="checkbox" name="duoxuan" checked="checked"/>梨子
            <input type="checkbox" name="duoxuan" />香蕉
            //checked表示默认选项，这里可以有多个默认选项

## 6.下拉列表 ##

<select>
                    <optgroup label="湖北">
                    <option selected="selected">武汉</option>
                    <option>十堰</option>
                    <option>汉川</option>
                    </optgroup>
                    <optgroup label="湖南">
                    <option>长沙</option>
                    <option>常德</option>
                    </optgroup>
            </select>
            //optgroup是分组
            //selected是默认选择

## 7.标签 ##

<label for="myinput">danxuan</label>
         <input type="text" id="myinput"/><br><br>
         //就是个标签，不会有太多效果
         //但是记住得绑定,for和id

## 8.普通按钮 ##

input type="button" value="普通按钮"/>
    //常常配合js函数使用

## 9.图片按钮 ##

<`input type="image" src=""/>
    //一个小图片，但是可以点击，是一个按钮

## 10 重置按钮 ##

<input type="reset"/>
    //重置所有数据
    //只重置表单中的表单项
    //不用设置value都有重置在上面显示

## 11.提交按钮 ##

<input type="submit" value="提交按钮"/>
    //把表单项提交给action（form中设置）指定的地方
    //提交的表单项必须要有name
    //默认有提交两字

## 12.文件上传 ##

<input type="file"/>
    //可以打开计算机读取文件的小窗口

## 13.隐藏域 ##

<input type="hidden" name="test" value="12">
    //隐藏的输入字段

## 14.其他 ##

剩下的有些是不常用，有些是不兼容，所以，只是简单的列出来

取色器：<input type="color"><br><br>
        日期：<input type="date"><br><br>
        email:<input type="email"/><br><br>
        url:<input type="url"/><br><br> 
        电话<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> 
        数字输入：<input type="number" min="0" max="10" step="0.5" value="6" />
        搜索框<input type="search">
            //type="date"的input输入类型用于选取日、月、年
            <input type="date">
            //type="month"的input输入类型用于选取月、年
            <input type="month">
            //type="week"的input输入类型用于选取周、年 
            <input type="week">
            //type="time"的input输入类型用于选取时、分
            <input type="time">
            //type="datetime"的input输入类型用于选取时、日、月、年(UTC时间)
            <input type="datetime">
            //type="datetime-local"的input输入类型用于选取时、日、月、年(本地时间)
            <input type="datetime-local">