（12）HTML&&CSS笔记（表单）

最新推荐文章于 2023-06-08 19:47:35 发布

沭瑾

最新推荐文章于 2023-06-08 19:47:35 发布

阅读量136

点赞数

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/xiaoma_666/article/details/97374411

版权

HTML&&CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、form的属性
action 规定表单提交到哪个地址；
target 规定链接地址在哪个窗口打开；

_self 在本窗口打开
_blank 新窗口打开

name 表单的名字
method 表单的提交方式

get
post

<form name='kaidyHobby' action="http://www.baidu.com" target='_blank' method='get'>    
</form>

2、input表单
type类型

text 文本
password 密码
radio 单选按钮
name 组合（是一组单选的内容，只能选一个）checked 默认选中
label 标签 for 关联（用id与之关联起来）
checkbox 多选框
checked 默认选中
disabled 禁止
submit 按钮
button 标签按钮
前两个按钮都可以放到form表单里面，会生效
type：button 按钮结合js生效
reset 重置
color 调色
file 文件（multiple 可选多个文件）

<form name='kaidyHobby' action="http://www.baidu.com" target='_blank' method='get'>
       <p> 帐号： <input type='text' class='txt'/> </p> 
       <p> 密码： <input type='password' class='password'/> </p> 
       <p> 性别： 
           <!-- 单选框 -->
            <input type='radio' id='boy' class='radio' name='sex' checked/>
            <label for='boy'>蓝</label>  
            <input type='radio' id='girl' class='radio' name='sex'/>
            <label for="girl">吕</label> 
        </p> 
        <p>
            <!-- 复选框 -->
            请说出你喜欢的英雄：
            <input type="checkbox" id='dema' checked> <label for='dema'>德玛西亚</label> 
            <input type="checkbox" id='yaso' disabled> <label for='yaso'>亚索</label> 
            <input type="checkbox" id='jianshen'> <label for='jianshen'>剑圣</label> 
            <input type="checkbox" id='xiuer' disabled> <label for='xiuer'>陈独秀</label> 
            <input type="checkbox" id='timo'> <label for='timo'>提莫</label> 
            <input type="checkbox" id='dazhao'> <label for='dazhao'>李大钊</label> 
        </p>

        <div class=''>
            <!-- 按扭 -->
            <input type="submit">
            <input type="button" value='按钮'>
            <button>提交按钮</button>
            <input type="reset">
            <input type="file" multiple>
            <input type="color">
            <!-- <input type="email"> -->
        </div>
    </form>

3、form控件

select/options 控件
size 显示个数
selected=‘selected’ 默认选中

<div>
            你喜欢水果？
            <select name="" id="" size='1'>
                <option value="">iphone</option>
                <option value="">banana</option>
                <option value="" >melon</option>
                <option value="" selected='selected'>watermelon</option>
                <option value="">orange</option>
                <option value="">mango</option>
                <option value="">peach</option>
                <option value="">pear</option>
            </select>    
</div>

textarea 文本域
rows 行
cols 列
resize 调整尺寸样式属性：
none 禁止调整
vertical 调整垂直方向
horizontal 可调整宽度

<textarea name="" id="" cols="30" rows="10" style=" resize:none"></textarea>
<!-- div模仿文本域 contenteditable="true"  -->
<div class='text' contenteditable="true"></div>

fieldset 分组
legend 分组的标题

<fieldset>
            <legend style='text-align:center;'>客运中心</legend>
            <input type="checkbox" id='dema' checked='checked'> <label for='dema'>北京</label> 
            <input type="checkbox" id='yaso' disabled> <label for='yaso'>上海</label> 
            <input type="checkbox" id='jianshen'> <label for='jianshen'>杭州</label> 
            <input type="checkbox" id='xiuer' disabled> <label for='xiuer'>苏州</label> 
            <input type="checkbox" id='timo'> <label for='timo'>常州</label> 
            <input type="checkbox" id='dazhao'> <label for='dazhao'>深圳</label> 
</fieldset>

outline 外轮廓
outline 与 border 的区别：
outline是表单内容自带的。

<style>
        textarea{
            /* outline: none; */
             outline:5px solid #000; 
        }
    </style>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

placeholder 提示内容
value 默认输入的内容
focus 焦点

<style>
        input:focus + .mydiv{
            display: block;
        }
        .mydiv{
            display:none;
            position: absolute;
            left:190px;
            top:0px;
            width:200px;
            height:50px;
            background-color: #ff0;
        }
</style>
<body>
    <input type="text" placeholder="你点我出现！" value>
    <div class='mydiv'>
        出现了~
    </div>
</body>

沭瑾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（12）HTML&&CSS笔记（表单）

1、form的属性action 规定表单提交到哪个地址；target 规定链接地址在哪个窗口打开；_self 在本窗口打开_blank 新窗口打开name 表单的名字method 表单的提交方式getpost<form name='kaidyHobby' action="http://www.baidu.com" target='_blank' method='ge...
复制链接

扫一扫

专栏目录