第一篇web前端博客之复习篇

 复习内容创建一个完整的表单。

       对于表单，初学者可能比较陌生，但是在互联网中随处可见，例如登录注册页面中的用户名密码输入，性别选择，提交按钮等都是用表单的相关标签来定义的。表单是网页中输入信息的区域，主要是用来采集用户信息，传递给后台服务器，便于实现网页与用户的沟通。

一.完整表单的构成：

1. 表单控件（表单元素）：文本输入框，密码框，复选框，提交按钮等。
2. 提示信息：一个表单中通常包括一些说明性的文字，用来提示用户填写。
3. 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。

二.完整表单的构成：

       在HTML5中,<form></form>标签用于定义表单域,即创建一个表单，以实现用户信息的收集和传递。基本语法格式如下:
 

<form action="#" method="get|post"></form>

       上述语法中，<form>与</form>之间的控件是由用户自定义的。action属性用于指定接收并处理表单数据的服务器程序的url地址。当提交表单时,表单数据会传送到对应的页面去处理。method 属性用于设置表单数据的提交方式,其取值为 get 和 post。采用 get 方法提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制,而post方式的保密性好，并且无数据量的限制name 属性用于指定表单的名称,以区分同一页面中的多个表单。

1.表单控件input

input控件的属性：

type属性：

用户名：
		<!--单行文本输入框
        -->
		<input type="text" value="请输入用户名" maxlength="8">
		<!--用来输入简短的信息，如用户名，证件号码。-->

	密码：
		<!--
        	password密码输入框
        -->
		<input type="password" size="40">
		<!--用来输入密码-->

		性别：
		<!--
            radio单选按钮
        	
        -->
		<input type="radio" name="sex" checked>男
		<input type="radio" name="sex">女<br><br>兴趣：
		<!--用于单项选择，如性别，是否操作等。需要注意，定义单选时，
		必须为同一组选择定义相同的name值，这样"单选"才会生效。checked属性为单选设置默认值-->

	兴趣：
		<!--
        	checkbox复选框
        -->
		<input type="checkbox">唱歌
		<input type="checkbox">跳舞
		<input type="checkbox">游泳
		<!--多项选择-->

	提交按钮：
		<!--
        	submit提交按钮
        -->
		<input type="submit">
		<!--是表单中的核心控件，用户完成输入信息后，必须
		通过提交按钮才可以将表单数据提交。-->

		重置按钮：
		<input type="reset">
		<!--
        	reset重置按钮
        -->
        <!--当填写错误时，可以通过重置按钮取消已输入的所有表单信息。-->

上传头像：
		<!--
        	file文件域
        -->
		<input type="file">
		<!--定义文件域时，页面会出现一个文本框，和一个“浏览……”按钮，用户可以通过填写
		文件路径或直接选择文件的方式，将文件交给后台服务器-->

   普通按钮：
		<input type="button" value="普通按钮">
		<!--
        	button普通按钮
        -->
      <!-- 配合javascript脚本语言使用-->

 提交：
		<input type="image" src="搜索.png">
		<!--图片形式的提交按钮-->

下面是一个简单的表单页面

input控件的其他属性

属性	属性值	描述
name	由用户定义	控件的名称
value	由用户定义	input控件中的默认文本值
size	正整数	input控件在页面中显示的宽度
readonly	readonly	该控件内容为只读
disabled	disabled	第一次加载页面是禁用改控件（显示为灰色）
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

2.表单控件textarea

多行文本输入框：

评论：<br>
			<textarea cols="50" rows="7">
				评论的时候，请遵纪守法并注意言语文明，多给文章分享人一些支持。
			</textarea>

3.表单控件select

下拉菜单：

特长(单选)：<br />
		<select>
			<option>请选择</option>
			<option>唱歌</option>
			<option>跳舞</option>
			<option>写代码</option>
			<option selected="selected">画画</option>
			<!--设置为默认选中项 -->

 以上是表单控件的简单复习。

下面是一个拓展的表单简单网页页面。

 

以上就是我的第一篇博客，写的很简单，但是在写的同时也又复习了一边，很有成就，希望通过这个平台分享学习日记，能和大家共同学习。