表单的使用-HTML入门基础（021）-CSDN博客

本文链接：https://blog.csdn.net/modern358/article/details/110269520

之前我们学习的内容，用标签做出来的网页，都是静态页面。对于一个网页，只限于用户浏览内容，就是静态网页。如果能够实现与服务器交互，就是动态网页。

表单，是我们接触动态网页的第一步。表单是用来在客户端收集用户的信息，然后将数据传递给服务器来处理的。

我们先在HTML中学习如何使用表单控件做出类似问卷调查之类的网页，至于怎么和服务器交互的事情，我们后期分享关于PHP等服务器脚本之后，就可以做了。

input标签：

输入信息时，我们就会用到input标签，它是一个自闭合标签，没有结束标签。

语法：

<input type="表单类型" id="" name="">

type属性值	说明
text	文本框
password	密码框
button	按钮
reset	重置按钮
submit	提交按钮
image	图像形式的按钮
radio	单选
checkbox	复选框
hidden	隐藏字段
file	上传文件

text文本框：

需要输入框，我们都会使用text文本框，语法如下

<input type="text" id="" name="">

示例代码：

<html>  <head>    <title>text文本框</title>  </head>  <body>    姓名：<input type="text" id="name1" name="name1">    年龄：<input type="text" id="age" name="age">  </body></html>

text文本框常用属性
属性	说明
value	定义文本框的默认值，就是文本框内的文字
size	定义文本框的长度，以字符为单位
maxlength	设置文本框最多可以输入的字符数

语法：

<input type="text" id="" name="" value="默认文字" size="文本框长度" maxlength="最多输入字符数">

示例代码：

<html>  <head>    <title>单行文本框属性</title>  </head>  <body>    姓名：<input type="text" value="张三" size="4" maxlength="6"/><br>    年龄：<input type="text" value="18" size="2" maxlength="2"><br>    毕业学校：<input type="text" value="虾米大王培训学院" size="20" maxlength="50"><br>  <body></html>

以上代码，测试后你会发现，姓名最大6个字符，也就是最多可以输入6个汉字，年龄最大2位，也就是99岁到头了。

下一节我们接着分享关于input标签的内容。