2.7.1HTML标签-表单-from, input, select, te

MXLS

已于 2023-03-17 20:42:55 修改

阅读量72

点赞数

分类专栏： Web前端开发文章标签： html 前端 Powered by 金山文档

于 2023-03-15 09:57:38 首次发布

本文链接：https://blog.csdn.net/ikun_King/article/details/129540680

版权

Web前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

from-表单元素本身标签-双标签

格式

<form action="数据处理网页">
表单元素
</from>

input-表单信息的输入

<frtom>
<input type="text|password"/>
</from>

文本框-type="text" //明文显示

密码框-type="password" //***显示

  <form>
            账户：<input type="text">
            <br>
            密码：<input type="password">

 </form>

提交按钮-submit

        <form>
                姓名：
                <input type="text"  value=""    name="myname">
                <input type="submit"  value="提交" name="submitBtn">
        </form>

type="submit"-提交按钮

value="提交"-按钮上显示文字

重置按钮-reset

        <form>
               爱好
               <input type="text">
               <input type="submit" value="确定" />
               <input type="reset"   value="重置" />
        </form>

单选框-type="radio"

复选框-type="checkbox"

        <form>
                <input type="radio|checkbox"
                       value="值" name="名称" checked="checked"/>
        </form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
        <form>
                性别：
                男  <input type="radio" value="boy" name="gender" checked="checked"/>
                女  <input type="radio" value="girl" name="gender"/>
                <br>
                爱好：
                <input type="checkbox" value="1" name="music" checked="checked"/>音乐
                <input type="checkbox" value="2" name="sport"/>体育
                <input type="checkbox" value="3" name="reading"/>阅读
        </form>
</body>
</html>

结果：

注意点：

默认被选择-checked="checked"

其中性别为单选框，爱好为复选框

单选框-男女的name属性要相同-name="gender"

复选框-name属性可以不相同

select-下拉菜单

模板：

                <select>
                         <option>选项1</option>
                         <option selected="selected">选项2</option>   
                </select>

selected="selected"表示被选择的一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
        <form>
                <select>
                         <option>看书</option>
                         <option selected="selected">旅游</option>
                         <option>运动</option>
                         <option>购物</option>   
                </select>
        </form>
</body>
</html>

结果：

textarea-设置文本域-双标签

模板：

<textarea rows="行数" cols="列数">文本</textarea>

        <form>
                个人简介：<br >
                <textarea cols="50" rows="10">
                    在这里输入内容...
                </textarea>
                <br />
                <input type="submit" value="确定">
                <input type="reset" value="重置">
        </form>