工坊打卡-Day6表单元素+练习

ian燃.

已于 2023-01-16 18:23:01 修改

阅读量164

点赞数 1

分类专栏：工坊打卡前端学习文章标签：前端 java javascript Powered by 金山文档

于 2023-01-14 22:03:30 首次发布

本文链接：https://blog.csdn.net/m0_73952430/article/details/128683990

版权

工坊打卡前端学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

开头是接着昨天没有写完的表单标签

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容插件。

1.<input>表单元素

<input>标签用于收集用户信息

在<input>标签中，包含一个type属性，根据不同type属性值，输入字段拥有多种形式（文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）

<input type=“属性值” />

<input/>标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

type的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过Javascript启动脚本）。
checkbox	定义复选框。可以实现多选多。
file	定义输入字段和“浏览”按钮，供文件上传。
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮。
password	定义密码字段，该字段中的字符被掩码。
radio	定义单选按钮。实现多选一要有相同的name。
reset	定义重置按钮，重置按钮会清除表单中的所有数据。
submit	定义提交按钮，提交按钮会把表单数据发送到服务器。
text	定义单行输入字段，用户可在其中输入文本。默认宽度为20个字符。

除type属性外，<input>标签还有其他很多属性，常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称。（同一组要起相同名字）
value	由用户自定义	规定input元素的值。value主要在文本框显示，给后台人员使用的
checked	checked	规定此input元素首次加载时应当被选中。
maxlength	正整数	规定输入字段中的字符的最大长度。

注意

name和value是每个表单元素都有的属性值，主要给后台人员使用。

name表单元素的名字，要求单选按钮和复选框要有相同的name值。

checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素checked=“checked”。

maxlength是用户可以在表单元素输入的最大字符数，一般较少使用.

<!DOCTYPE html>
<html lang="zh-CN">
<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>表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
        用户名：<input type="text" name="mz" value="请输入姓名" maxlength="6"><br/>
        密码：&nbsp;&nbsp;&nbsp;<input type="password" name="mm"><br/>
        性别：&nbsp;&nbsp;&nbsp;男<input type="radio" name="xb" value="男" checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="xb" value="女"><br/>
        爱好：&nbsp;&nbsp;&nbsp;前端<input type="checkbox" name="ah">后端<input type="checkbox" name="ah">算法<input type="checkbox" name="ah">大数据<input type="checkbox" name="ah">
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写"><br/>
        <input type="button" value="获取验证码"><br/>
        <input type="file">
    </form>
</body>
</html>

<label>标签

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，用来增加用户体验。

语法：

<label for=“sex”>男</label>
<input type=“radio” name=“sex” id=“sex” />

<label>标签的for属性应当与相关元素的id属性相同

<!DOCTYPE html>
<html lang="zh-CN">
<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>表单元素</title>
</head>
<body>
    <!-- <form action="xxx.php" method="get">
        用户名：<input type="text" name="mz" value="请输入姓名" maxlength="6"><br/>
        密码：&nbsp;&nbsp;&nbsp;<input type="password" name="mm"><br/>
        性别：&nbsp;&nbsp;&nbsp;男<input type="radio" name="xb" value="男" checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="xb" value="女"><br/>
        爱好：&nbsp;&nbsp;&nbsp;前端<input type="checkbox" name="ah">后端<input type="checkbox" name="ah">算法<input type="checkbox" name="ah">大数据<input type="checkbox" name="ah">
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写"><br/>
        <input type="button" value="获取验证码"><br/>
        <input type="file">
    </form> -->
    性别：
    <label for="xb1">男</label>
   <input type="radio" name="xb" value="男" checked="checked" id="xb1">
   <label for="xb2">女</label>
   <input type="radio" name="xb" value="女" checked="checked" id="xb2">
</body>
</html>

2.<select>下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间中，我们可以使用<select>标签控件定义下拉标签。

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<!DOCTYPE html>
<html lang="zh-CN">
<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>表单元素</title>
</head>
<body>
    <!-- <form action="xxx.php" method="get">
        用户名：<input type="text" name="mz" value="请输入姓名" maxlength="6"><br/>
        密码：&nbsp;&nbsp;&nbsp;<input type="password" name="mm"><br/>
        性别：&nbsp;&nbsp;&nbsp;男<input type="radio" name="xb" value="男" checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="xb" value="女"><br/>
        爱好：&nbsp;&nbsp;&nbsp;前端<input type="checkbox" name="ah">后端<input type="checkbox" name="ah">算法<input type="checkbox" name="ah">大数据<input type="checkbox" name="ah">
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写"><br/>
        <input type="button" value="获取验证码"><br/>
        <input type="file">
    </form> -->
    <!-- 性别：
    <label for="xb1">男</label>
   <input type="radio" name="xb" value="男" checked="checked" id="xb1">
   <label for="xb2">女</label>
   <input type="radio" name="xb" value="女" checked="checked" id="xb2"> -->
   籍贯：
   <select>
    <option>北京</option>
    <option>深圳</option>
    <option>天津</option>
    <option>上海</option>
    <option>广州</option>
   </select>
</body>
</html>

注意

<select>中至少包含一对<option>。

在<option>中定义select=“selected”时，当前项即为默认选中项。

3.<textarea>表单元素

使用场景:当用户输入内容较多的情况下，就不能使用文本框表单了，此时可以用<textarea>标签。（文本域）可以做大量文字输入

在表单元素中，<textarea>标签用于定义多行文本输入的控件。

<textarea rows=“3” cols=“20”>
文本内容
</textarea>

注意：

通过<textarea>标签可以轻松创建多行文本输入框。

cols=“每行中的字符数”，rows=“显示的行数”，实际开发中不会使用，都是用CSS来改变大小的。

综合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<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>世纪佳缘</title>
</head>
<body>
    <!-- <form action="xxx.php" method="get">
        用户名：<input type="text" name="mz" value="请输入姓名" maxlength="6"><br/>
        密码：&nbsp;&nbsp;&nbsp;<input type="password" name="mm"><br/>
        性别：&nbsp;&nbsp;&nbsp;男<input type="radio" name="xb" value="男" checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="xb" value="女"><br/>
        爱好：&nbsp;&nbsp;&nbsp;前端<input type="checkbox" name="ah">后端<input type="checkbox" name="ah">算法<input type="checkbox" name="ah">大数据<input type="checkbox" name="ah">
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写"><br/>
        <input type="button" value="获取验证码"><br/>
        <input type="file">
    </form> -->
    <!-- 性别：
    <label for="xb1">男</label>
   <input type="radio" name="xb" value="男" checked="checked" id="xb1">
   <label for="xb2">女</label>
   <input type="radio" name="xb" value="女" checked="checked" id="xb2"> -->
   籍贯：
   <!-- <select>
    <option>北京</option>
    <option>深圳</option>
    <option>天津</option>
    <option>上海</option>
    <option>广州</option>
   </select> -->
   <h3>青春不常在，抓紧谈恋爱</h3>
   <table width="500" border="1">
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex" id="nan" checked="checked" > <label for="nan"><img src="images/man.jpg" title="图片丢失"> 男</label>
            <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/woman.jpg" title="图片丢失"> 女</label>
        </td>
    </tr>
    <tr>
        <td>生日：</td>
        <td>
            <select>
                <option>--请选择年份--</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
                <option>2007</option>
            </select>
            <select>
                <option>--请选择月份--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>            
            <select>
                <option>--请选择日份--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>所在地区：</td>
        <td><input type="text" value="北京"</td>
    </tr>
    <tr>
        <td>婚姻状况：</td>
        <td>
            <input type="radio" name="marry" id="marry1"><label for="marry1"> 未婚</label> 
            <input type="radio" name="marry" id="marry2" checked="checked"> <label for="marry2"> 已婚</label>
            <input type="radio" name="marry" id="marry3" ><label for="marry3"> 离婚</label>
        </td>
    </tr>
    <tr>
        <td>学历：</td>
        <td>博士后</td>
    </tr>
    <tr>
        <td>喜欢的类型：</td>
        <td>
            <input type="checkbox" name="love">御姐
            <input type="checkbox" name="love">萝莉
            <input type="checkbox" name="love">小鲜肉
            <input type="checkbox" name="love">老腊肉
            <input type="checkbox" name="love">你
            <input type="checkbox" name="love" checked="checked">都喜欢
        </td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea>个人简介</textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="免费注册">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbbox" checked="checked"> 我同意注册条款和会员加入标准
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="#" >我是会员，立即登录</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <h5>我承诺</h5>
            <ul>
                <li>年满18岁、单身</li>
                <li>抱着严谨的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>
    </tr>
   </table>
</body>
</html>

ian燃.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
工坊打卡-Day6表单元素+练习

在标签中，包含一个type属性，根据不同type属性值，输入字段拥有多种形式（文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）标签用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，用来增加用户体验。cols=“每行中的字符数”，rows=“显示的行数”，实际开发中不会使用，都是用CSS来改变大小的。在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容插件。规定input元素的值。
复制链接

扫一扫