HTML表单

最新推荐文章于 2024-10-17 15:53:46 发布

拜拜雪公主zz

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量82

点赞数

分类专栏：前端html系列笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46152483/article/details/119110746

版权

前端html系列笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置:<form> input内容 </form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）：
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

 <form>
		First name: <input type="text" name="firstname"><br>
		Last name: <input type="text" name="lastname">
</form>

在这里插入图片描述
2. 密码字段：密码字段通过标签来定义:

<form>
Password: <input type="password" name="pwd">
</form>

在这里插入图片描述
3. 单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述
4. 复选框（Checkboxes）
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在这里插入图片描述
5. 提交按钮(Submit Button)
定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在这里插入图片描述

HTML表单下拉菜单案例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

在这里插入图片描述

表单标签综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <table border="1" align="center" cellspacing="0" width="400"height="600">
        <tr>
            <td>名字：<input type="text" name="表单" value="请输入姓名"></td>
        </tr>
        <tr>
            <td> 密码：<input type="password" name="pwd"></td>
        </tr>
        <br>
        <tr>
            <td>性别:
            <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
            <input type="radio" name="sex" id="nv"> <label for="nv">女</label></td>
        </tr>
        <br>
        <tr>
            <td>爱好:
            <input type="checkbox" name="hobby" id="hobby1"> <label for="hobby1">看电影</label>
            <input type="checkbox" name="hobby" id="hobby2"> <label for="hobby2">打篮球</label>
            <input type="checkbox" name="hobby" id="hobby3"> <label for="hobby3">看书</label>
            <input type="checkbox" name="hobby" id="hobby4"> <label for="hobby4">购物</label></td>
        </tr>
        <tr>
            <td>籍贯：
                <select name="" id="">
                <option value="">苏州</option>
                <option value="">吉林</option>
                <option value="">杭州</option>
                <option value="">广州</option>
                <option value="">南京</option>
                <option value="">绍兴</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>问题反馈：
                <textarea name="" id=" " cols="30" rows="5">请简单描述你的问题...</textarea>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述