前言

又来更新啦~今天写有关HTML表单创建的笔记，前面还有两篇关于表格和文本的笔记，大家可以去看看：HTML学习笔记摘要目录参考。表单因为种类以及属性挺繁琐，所以单拿出一章来写。对于HTML这种目前学来很简单的，看书看一遍就会，一点难度都没有，但看完啥代码都不会写。所以像我这样写个笔记效果还是蛮好的，虽然大部分内容都是书上有的，但手打一遍收获还是很大的，好了，下面进入正题。
表单主要用于收集网页上浏览者的相关信息，其标签为< form >< /form >。表单的基本语法格式为

<form action="url" method="get|post" enctype="mime"></form>

其中，action = " url "指定助理提交表单的格式，他可以是一个URL地址或者一个电子邮件的地址。method = " get “或者” post "指明提交表单的HTTP方法。enctype = " mime "知名用来把表单提交给服务器时的互联网媒体形式。表单是一个能够包含表单元素的区域。通过添加不同的表单元素，将显示不同的效果。
下面是书上的一个程序：

<body>
<form>
	下面是输入用户登录信息<br>
	用户名称
	<input type="text" name="user">
	<br>
	用户密码
	<input type="password" name="password"><br>
	<input type="submit" value="登陆">
</form>	
</body>

在这里插入图片描述
看了这个程序我们知道了，所谓表单就是我们需要提交给网页后台的途径，比如密码，用户名啥的。

表单基本元素

表单元素是能够让用户在表单中输入信息的元素。常见的有文本框，密码框，下拉列表框，单选按钮，复选框等。

单行文本输入框text

单行文本输入框(text)是一种让访问者自己输入内容的表单对象，通常被用来填写单个自或者简短的回答，如用户姓名，地址等。
代码格式：

<input type="text" name="zx" size="..." maxlength="..." value="...">

type="text"定义单行文本框，name定义名字，并不会显示出来，但会在其他地方引用时用到，名字应该是独一无二的。size属性定义文本框的宽度，单位是单个字符宽度。maxlength属性定义最多输入的字符数。value属性定义文本框的初始值。

多行文本输入框textarea

<textarea name="..." cols="//" rows="//" wrap="//"></textarea>

非常简单，首先定义是多行文本框，然后输入名字name，再输入文本框宽度，单位为单个字符宽度。rows属性定义多行文本框的高度，单位为单个字符高度。wrap属性定义内容大于文本区域时显示的方式。

<form>
	请输入您的恋爱情况wrap="hard"<br>
	<textarea name="yourlove" cols="50" rows="5" wrap="hard"></textarea>
	<br>
	<input type="submit" value="提交"><br>
	请输入您的恋爱情况wrap="off"<br>
	<textarea name="yourlove" cols="50" rows="5" wrap="off"></textarea>
	<br>
	<input type="submit" value="提交"><br>
	请输入您的恋爱情况wrap="soft"<br>
	<textarea name="yourlove" cols="50" rows="5" wrap="soft"></textarea>
	<br>
	<input type="submit" value="提交"><br>
	请输入您的恋爱情况wrap="physical"<br>
	<textarea name="yourlove" cols="50" rows="5" wrap="physical"></textarea>
	<br>
	<input type="submit" value="提交"><br>
	请输入您的恋爱情况wrap="virtual<br>
	<textarea name="yourlove" cols="50" rows="5" wrap="virtual"></textarea>
	<br>
	<input type="submit" value="提交"><br>
</form>

在这里插入图片描述
对于前几个属性没什么好说的，但最后一个wrap有五个选项，我们不设置它，用默认属性是没啥问题的，但我们在这儿钻研一下，我们把这五个设置一遍，看到出来soft有很大不同，是横着显示的，其他四个没有什么区别，这时就要发挥CSDN的用处啦，我们去百度一下：
soft 在表单提交时，textarea 中的文本不换行。(默认)
hard 在表单提交时，textarea 中的文本换行（包含换行符）。
当使用 “hard” 时，必须指定 cols 属性
嗯哼，没找到我想要的，大多是这三行介绍，是提交时的区别，并不是显示时的区别，就先不管了。。。

密码输入框password

密码输入框就是密码输入框啦，经平时输密码显示小黑点的那个：

<input type="password" name="..." size="..." maxlength="...">

type=" password "定义密码输入框；

<form>
用户姓名：<input type="text" name="yourname">
<br>
登陆密码：<input type="password" name="pw">
<br>
</form>

在这里插入图片描述

单选按钮radio

<input type="radio" name=".." value="..">

type = " radio " 定义单选按钮，name就是单选按钮的名称，因为单选按钮都是以组为单位使用的，在同一组中的单选按钮都是同一个名称；value属性定义单选按钮的值。

<form>
	请选择你喜欢的电影类型：
	<br>
	<input type="radio" name="MV" value="MV1">爱情片<br>
	<input type="radio" name="MV" value="MV2">动作片<br>
	<input type="radio" name="MV" value="MV3">爱情动作片<br>
</form>

在这里插入图片描述

复选框checkbox

<input type="checkbox" name=".." value="..">

<form>
	请选择你喜欢的电影类型：
	<br>
	<input type="checkbox" name="MV" value="MV1">爱情片<br>
	<input type="checkbox" name="MV" value="MV2">动作片<br>
	<input type="checkbox" name="MV" value="MV3">喜剧片<br>
	<input type="checkbox" name="MV" value="MV4" checked>爱情动作片<br>
</form>

在这里插入图片描述
程序中，爱情动作片是默认勾选的。checked属性主要用来设置默认选中项。

列表框select

列表框主要用于在有限的空间里设置多个选项。列表框既可以用作单选，也可以用作复选。

<select name="..." size="..." multiple>
	<option value="..." selected>
		...
	</option>
	...
</select>

size定义列表框的函数，name属性定义列表框的名称，multiple属性表示可以多选，如果不设置本属性，那么只能单选；value属性定义列表项的值，selected属性表示默认已经选中本选项。

<form>
	选择你喜欢的图书类型：<br>
	<select name="fruit" size="3" multiple>
		<option value="BOOK1" >HTML编程</option>
		<option value="BOOK1" selected>学习opencv</option>
		<option value="BOOK1">STM32</option>
	</select>
</form>

在这里插入图片描述

普通按钮button

普通按钮用来控制其他定义了处理脚本的处理工作。

<input type="button" name="" value="" onClick="">

value定义按钮显示的文字，onClick属性表示单击行为，也可以表示其他事件，通过指定脚本函数来定义按钮的行为。

<form>
	点击下面的按钮，把文本框1的内容复制到文本框2中：
	<br>
	文本框1：<input type="text" id="field1" value="学习HTML">
	<br>
	文本框2：<input type="text" id="field2">
	<input type="button" name="BU" value="点击我" onClick="document.getElementById('field2').value=document.getElementById
														('field1').value">
</form>

在这里插入图片描述
这些代码确实能实现复制的功能，但对于onClick="document.getElementById('field2').value=document.getElementById ('field1').value这行代码，我确实看不懂，应该是属于我们上面说的也可以表示其他事件，通过指定脚本函数来定义按钮的行为。里面的脚本吧？不清楚，但我们可以看懂onClick这个词就好了，想来学到后面我们就可以自己写这些操作了。

提交按钮submit

submit用来将输入的信息提交给服务器，代码格式：

<input type="submit" name="..." value="...">

通过提交按钮，可以将表单中的信息提交给表单中action所指向的文件。

<form action="Untitled-1.html" method="get">
	请输入你的名字：<input type="text" name="yourname">
	<br>
	<input type="submit" value="提交">
</form>

在这里插入图片描述
我们可以发现，输入名字点击提交后，会跳转到提交的页面<form action="Untitled-1.html" method="get">Untitled-1.html网页，但谁接收了我们提交的名字我们目前并不知道，我们将这个问题留在后续博文中吧，因为我也不知道。

重置按钮reset

重置按钮又叫复位按钮。

<input type="reset" name=",,," value="...">

<form >
	请输入用户名称：<input type="text">
	<br>
	请输入用户密码：<input type="password">
	<br>
	<input type="submit" value="登陆">
	<input type="reset" value="重置">
</form>

在这里插入图片描述

尾言

其实按书上所写，本章还有一节高级表单，但写到现在已经5000多字了，虽然很多是代码，不过量也不少了，希望大家可以有所收获，高级表单下篇笔记再写。
我们可以总结如下：

表单元素是在表单区域< form >内进行布置的
表单元素都有独一无二的名字name
表单元素所显示的文字或自身标签为value，选项的value是不表现出来的，按钮的value是按钮所表示的
好了，今天就到这里，我后续会继续更新我的HTML学习笔记，学完后会整理一些其他所学，多多关注哦~

周旋_

发布了26 篇原创文章 · 获赞 40 · 访问量 3641

私信关注

HTML学习笔记三：表单（一）初级应用

前言

表单基本元素

单行文本输入框text

多行文本输入框textarea

密码输入框password

单选按钮radio

复选框checkbox

列表框select

普通按钮button

提交按钮submit

重置按钮reset

尾言

猜你喜欢