HTML form表单标签

最新推荐文章于 2023-03-09 21:10:33 发布

昨夜太平长安888

最新推荐文章于 2023-03-09 21:10:33 发布

阅读量388

点赞数

分类专栏： HTML 文章标签： HTML form表单

本文链接：https://blog.csdn.net/HelloWord176/article/details/100539258

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

form 表单标签

form是表单标签元素的容器

<input type="text"> 文本输入框；

<input type="password"> 密码框；

<input type="radio"> 单选框；

<input type="checkbox"> 多选框；

<input type="submit"> 提交按钮；

<input type="reset"> 重置按钮；

<input type="button"> 普通按钮；

<input type="file"> 提交文件；

<input type="radio"> 单选框；如果选择其中一个，必须要给一个相同的 name 值！

如：性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">

name 表单元素的属性，需要通过submit按钮提交的元素必须要有 name 值！

name : 代表提交的属性是什么属性。

value ：代表提交的属性值是什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单标签form练习</title>
    <style>
        form {
            width: 700px;
            font-size: 30px;
            margin: 0 auto;
        }
        select{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <form action="">
        姓名：<input type="text" name="name">  <br>    <!-- 文本输入框 -->
        密码：<input type="password" name="password"><br>    <!--密码框-->
        性别：男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="women"><br>   <!--单选框-->
              <!-- 单选框如果要选择其中的一个时，必须要给它们一个相同的name值，让他们产生互斥！ -->
        年龄：<input type="text" name="age"><br>
        爱好：唱歌<input type="checkbox" name="hobby" value="唱歌"> 画画<input type="checkbox" name="hobby" value="画画"> 看书<input type="checkbox" name="hobby" value="看书"><br>   <!--多选框-->
    </form>
</body>
</html>

input ： focus{

boder: 2px solid red;

}

在style中写，当鼠标获得焦点时，所展现的效果！

二、下拉菜单 select

格式：

市  <select name="city" id="" size="2">
            <option value="1">郑州</option>
            <option value="2">三门峡</option>
            <option value="3">商丘</option>
            <option value="4">合肥</option>
            <option value="5">南京</option>
    </select>

name : 代表提交的属性是什么属性； option ：是下拉菜单的选项； value：提交时对应option的值；

size：可以将下拉菜单设置成滑动的选项，size等于几，就可以展示几个选项。

三、文本域

cols ：代表列； rows ：代表行；

例子：

留言：<textarea name="message" id="" cols="30" rows="10"></textarea>

浏览器解析出来为：

重点如果样式不对可以在style设置一下样式：

textarea ｛

vertical-align：top；

｝

四、fieldest 自定义控件组

<fieldset>
       <legend>体检报告</legend>
       身高：<input type="text"> <br>
       体重：<input type="text"><br>
       视力：<input type="text"><br>
       报告:<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>

1. fieldset 标签将表单内容一部分打包，生成一组相关表单的字段；2.当一组表单元素放到 <fieldset></fieldset>标签内时，浏览器会以线框来显示它们；3.<legend></legend>标签为fieldset 元素定义的标题

作业：代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息</title>
    <style>
        div {
            width: 700px;
            margin: 0 auto;
            border: 1px solid #3e2f32;
        }
        h1 {
            text-align: center;
        }
        form {
            margin: 0 30px 50px;
        }
        textarea {
            vertical-align: top;
            width: 550px;
        }
    </style>
</head>
<body>
    <div>
        <h1>个人信息</h1>
        <form action="">
            姓名：<input type="text"><br><br>
            年龄：<input type="text"> <br><br>
            照片：<input type="file"> <br><br>
            <fieldset>
                <legend>身体特征</legend>
                身高：<input type="text">&nbsp;cm <br><br>
                体重：<input type="text">&nbsp;kg <br>
            </fieldset>
            <br><br>
            性别：<label><input type="radio" name="sex" value="man">男</label>
                <label><input type="radio" name="sex" value="women">女</label>
                <br><br>
            爱好：<label><input type="checkbox" name="hobby" value="sing">唱</label>
                  <label><input type="checkbox" name="hobby" value="jump">跳</label>
                  <label><input type="checkbox" name="hobby" value="rap">rap</label>
                  <br><br>
            出生地：<select name="birthplace" id="">
                    <option value="1">商丘</option>
                    <option value="2">郑州</option>
                    <option value="3">洛阳</option>
                    <option value="4">卢氏</option>
                    <option value="5">三门峡</option>
                    <option value="6">周口</option>
            </select>
            <br><br>
            自我评价：<textarea name="evaluate" id="" cols="30" rows="5"></textarea>
            <br><br>
            <input type="submit">
        </form>
    </div>
</body>
</html>

昨夜太平长安888

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML form表单标签

form 表单标签 form是表单标签元素的容器 <input type="text"> 文本输入框； <input type="password"> 密码框； <input type="radio"> 单选框； <inp...
复制链接

扫一扫

专栏目录