表单类标签-CSDN博客

本文链接：https://blog.csdn.net/m0_61682542/article/details/136411075

姓名：<input type="text" name="userName"/>

input标签 type类型是text name的属性值是userName

效果如下

密码：<input type="password" name="pwd" value="123456"/>

输入的值要个value相同

效果如下：

<input type="radio" name="sss"/>

type=radio是单选框类型，只要name是一样的，就是这里面只能选一个

<input type="checkbox" name="relax"/>

这个是多选框

<input type="checkbox" name="relax" checked="checked"/>

checked这个选项默认是checked，然后这个标签是默认选择的

<input type="checkbox" name="relax" disabled="disabled"/>

disabled这个选项默认是disabled，也就是这个选项不能选

<label for="user">用户：</label>
<input type="text" id="user" name="user"/>

label中的for的名字只要和id一样，就可以两个关联起来的，点击文本也可以跳转到输入

<select>
        <option>问答</option>
        <option>分享</option>
        <option>招聘</option>
        <option selected="selected">客户端测试</option>
    </select>

制作一个下拉列表

selected这个选项默认是selected，直接就选中默认值了

<head>
    <meta charset="UTF-8">
    <!-- ********* Begin ********* -->
    <style>
        textarea {
            width:200px;
            height:120px;

        }
    </style>
</head>
<body>

    用一句话描述自己的特点：<textarea maxlength="15"></textarea>
    <!-- ********* End ********* -->
</body>

在head字段中的textarea中进行调整，在body字段中对于<textarea><textarea>进行使用，其中maxlength是最大文本宽的长度，那些也是用来调整文本框的

<input type="submit" value="submit" />

类型是submit，value是在上面的字

接下来给出一个例子：

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
    </style>
</head>
<body>

    <form class="container">
    <!-- ********* Begin ********* -->
<div>
    <span>用户名：</span>
    <input type="text" class="common"/>
</div>
<div>
    <span>昵称：</span>
    <input type="text" class="common"/>
</div>
<div>
    <span>性别：</span>
    <input type="radio" id="male" name="sex"/><label for="male">男</label>
    <input type="radio" id="female" name="sex"/><label for="female">女</label>
    <input type="radio" id="other" name="sex" disabled="disabled"/><label for="other">保密</label>
</div>
<div>
    <span>教育程度：</span>
    <select class="common">
        <option>高中</option>
        <option>中专</option>
        <option>大专</option>
        <option selected="selected">本科</option>
        <option>硕士</option>
        <option>博士</option>
        <option>其他</option>
    </select>
</div>
<div>
    <span>婚姻状况：</span>
    <input type="radio" id="single" name="state" checked="checked"/><label for="single">未婚</label>
    <input type="radio" id="married" name="state"/><label for="married">已婚</label>
    <input type="radio" id="secret" name="state" /><label for="secret">保密</label>
</div>
<div>
    <span>兴趣爱好：</span>
    <input type="checkbox" id="football" name="hobby" /><label for="football">踢足球</label>
    <input type="checkbox" id="basketball" name="hobby"/><label for="basketball">打篮球</label>
    <input type="checkbox" id="film" name="hobby" checked="checked"/><label for="film">看电影</label>
</div>
<div>
    <span>描述自己的特点：</span>
    <textarea class="common" maxlength="20"></textarea>
</div>
<div>
    <span></span>
    <input type="submit" class="common" value="提交">
</div>
<!-- ********* End ********* -->
</form>
</body>
</html>