HTML与用户交互之＜form＞＜input＞

asiaqi

已于 2022-07-07 23:35:35 修改

阅读量710

点赞数 2

分类专栏： HTML asiaqi每日打卡文章标签： html 前端

于 2022-07-07 23:34:02 首次发布

本文链接：https://blog.csdn.net/m0_62200674/article/details/125669237

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

<form>

网站使用表单（form）实现与用户的交互。表单可以把浏览者输入的数据传送到服务器端，然后服务器端会处理表单传过来的数据，这是后端的内容。

语法

<form method=“传送方式” action=“服务器文件”>
</form>

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

<input>

获得输入框

基本语法

<form>
	<input type="输入框内容类型" name="名称" value="文本" />
</form>

type: 例如，当type=“text”时为文本输入框
name：为文本框命名，以备后台程序ASP、PHP使用
value：起提示作用，为文本框输入默认值

<input>的placeholder属性

提示用户输入框需要输入框的内容。

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

<body>

    <form action="save.php" method="post">

        用户名： <!--form内可以直接输入文字-->

        <input type="text" name="userName" placeholder="请输入用户名" />

        <br/>

        <br/>

        密码:

        <input type="password" name="pass" placeholder="请输入密码" />

    </form>

</body>

示例1

<input>的type属性

对不同的属性值，输入框会有不同的效果

属性值	输入框效果
text	可以输入文本
password	输入的内容默认不显示（可选择显示）
number	只能输入数字，输入其他字符无效。最右侧会有一个加减符号，可以调整输入数字的大小。
url	值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
email	数字框的值必须包含@,@之后必须有内容,否则会报错误提示。

<!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>我绝对不是骗信息</title>

</head>
<!--重点在下面部分-->
<body>

    <form action="save.php" method="post">

        用户名： <!--form内可以直接输入文字-->

        <input type="text" name="userName" placeholder="请输入用户名" />

        <br/><br/>

        密码:

        <input type="password" name="pass" placeholder="请输入密码" />

        <br/><br/>

        您的生日:

        <input type="number" name="birthday" placeholder="20030101" />

        <br/><br/>

        您的邮箱：

        <input type="email" name="userEmail" placeholder="1234567@qq.com" />

        <br/><br/>

        您最喜欢的网址: <!--我实在编不下去了-->

        <input type="url" name="favWeb" placeholder="http://www.bilibili.com" />

    </form>

</body>

</html>