前端基础知识

@清雅绝尘

于 2023-03-01 15:47:41 发布

阅读量227

点赞数 1

分类专栏：前端 html 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_45560461/article/details/129268725

版权

前端同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表单元素，包括文本框、密码框、单选按钮、复选框、文件上传、提交和重置按钮、图像按钮、下拉列表以及各种类型的输入字段，如email、url、search、tel、color、number等。同时，提到了表单的action和method属性，以及GET和POST提交方式的区别。此外，还讨论了autofocus和placeholder等属性的用途。

摘要由CSDN通过智能技术生成

Form表单

表单组成：容器（例如：表单）+ 控件（例如：输入框,提交按钮）

<form action="url" method="get|post" name="表单名字"></form>

属性说明：

action服务器地址
name表单名称

method中Get和Post的区别
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据

表单元素

表单标签
表单域
表单按钮

<form>
    <input type="text">
    <input type="submit">
</form>

文本框

<input type="text">

密码框

 <input type="password">

单选按钮

<input type="radio">

复选框

<input type="checkbox">

文件

<form>
    <input type="file" name="img">
</form>

提交按钮

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

重置按钮

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="reset" value="reset">
</form>

按钮

没有任何功能的按钮

<form name="input" action="url" method="get">
    <input type="button" value="点我"/>
    <button>点我</button>
</form>

图像图片按钮

<form name="input" action="url" method="get">
    <input type="image" src="1.jpg" />
</form>

下拉列表

<select> 元素用来创建下拉列表。
<option> 标签定义下拉列表中的一个选项（一个条目）

<form name="input" action="url" method="get">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
 </form>

<optgroup> 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使 <optgroup> 标签能够很简单的将相关选项组合在一起。

<form name="input" action="url"
method="get">
    <select>
        <optgroup label="车">
            <option value="汽车">汽车</option>
            <option value="火车">火车</option>
        </optgroup>
        <optgroup label="飞机">
            <option value="客机">客机</option>
            <option value="战斗机">战斗机</option>
        </optgroup>
    </select>
</form>

多行文本框

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性

<form name="input" action="url" method="get">
    <textarea rows="10" cols="30">我是一个文本框</textarea>
</form>

label

<label> 标签为 input 元素定义标注（标记）。
当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同

email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

<form>
   E-mail: <input type="email" name="usremail">
    <input type="submit">
</form>

url

定义用于输入 URL 的字段

<form>
    <input type="url" name="homepage">
    <input type="submit">
</form>

search

定义搜索字段（比如站内搜索或谷歌搜索等）

<form>
   Search Google: <input type="search" name="googlesearch">
    <input type="submit">
</form>

tel

定义用于输入电话号码的字段

<form>
   电话号码: <input type="tel" name="usrtel">
    <input type="submit">
</form>

color

从拾色器中选取颜色

<form>
   颜色: <input type="color" name="favcolor">
    <input type="submit">
 </form>

number

定义用于输入数字的字段

<form>
   number: <input type="number" name="quantity" min="1" max="5">
    <input type="submit">
</form>

range

定义用于精确值不重要的输入数字的控件。

<form>
    <input type="range" name="points" min="1" max="10">
    <input type="submit">
</form>

max : 规定允许的最大值。
min : 规定允许的最小值。
step : 规定合法数字间隔。
value : 规定默认值。

date

定义 date 控件

<form>
   生日: <input type="date" name="bday">
    <input type="submit">
</form>

month

定义 month 和 year 控件

<form>
   生日 ( 月和年 ): <input type="month" name="bdaymonth">
    <input type="submit">
</form>

week

定义 week 和 year 控件（不带时区）

<form>
   选择周: <input type="week" name="week_year">
    <input type="submit">
</form>

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

autofocus 属性适用于所有 <input> 标签的类型

<form>
   User name: <input type="text" name="user_name"  autofocus />
    <input type="submit">
</form>

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值

<form>
    <input type="search" name="user_search" placeholder="Search itbaizhan" />
    <input type="submit">
</form>

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）

<form>
   Name: <input type="text" name="usr_name" required />
    <input type="submit">
</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>Document</title>
</head>

<body>
    <form>
        姓名：<input type="text" name="姓名："><br>
        年龄：<input type="text" name="年龄："><br>
        密码：<input type="password" name="pwd"><br>
        性别：<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        爱好：<input type="checkbox" name="love" value="ball">篮球
        <input type="checkbox" name="love" value="book">读书
        <input type="checkbox" name="love" value="cook">做饭<br>
        文件：<input type="file" name="img"><br>
        <input type="button" value="按钮">
        <input type="submit" value="提交">

    </form>
    <form name="input" action="url" method="GET">
        name <input type="text" name="user">
        <input type="submit" value="submit">
        <input type="reset" value="reset"><br>
        <button>戳我</button><br>
        <input type="image" src="./3.png">
    </form>
    <form action="url">
        <select name="hobby" id="hobby">
            <option value="book">book</option>
            <option value="dance">dance</option>
            <option value="read">read</option>
            <option value="play">play</option>
        </select>
        <br>
        <select name="hobby" id="hobby">
            <optgroup label="第一组">
                <option value="book">book</option>
                <option value="dance">dance</option>
            </optgroup>
            <optgroup label="第二组">
                <option value="read">read</option>
                <option value="play">play</option>
            </optgroup>
        </select>
        <br>

        <textarea cols="30" rows="10">文本框</textarea>
        <label for="情味">收到</label>
        <input type="text" id="username">
        <label for="username">用户名</label>
    </form>

    <form action="url">
        E-mail: <input type="email">
        <input type="submit"><br>
        url:<input type="url">
        <input type="submit"><br>
        search: <input type="search">
        <input type="submit"><br>
        phone: <input type="tel">
        <input type="submit"><br>
        color: <input type="color">
        <input type="submit"><br>
        number: <input type="number" name="number" min="1" max="10">
        <input type="submit"><br>
        range: <input type="range" min="1" max="100" value="3">
        <input type="submit"><br>
        生日： <input type="date">
        <input type="submit"><br>
        生日： <input type="month">
        <input type="submit"><br>
        生日： <input type="week">
        <input type="submit"><br>

        输入：<input type="text" autofocus><br>
        <input type="search" placeholder="search">
        <input type="submit"><br>
        输入：<input type="text" required>
        <input type="submit"><br>


    </form>
</body>

</html>