表单的使用-HTML入门基础(021)

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

 

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

 

我们先在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标签的内容。

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页