一、表单

表单是一个包含表单元素的区域;

表单元素是允许用户在表单中输入内容,比如:文本域(lextarea)、下拉列表、

单选框(radio-buttons)、复选框(checkboxes)等等

表单使用表单标签:<form>来设置:

<from>

imput元素

</from>

二、常见的表单输入元素

多数情况下使用表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。常见的输入类型如:

文本域(Text Fields)

1、文本域通过<input type="text">标签来定义,当需要在表单中输入字母、数字等内容时,

就会用到文本域。

<form>

First name:<input type="text" name="firstname"><br>

Last name:<input type="text" name="lastname">

</form>

2、密码字段

使用<input type="password">来定义:

<form>

Password:<input type="password" name="password">

</form>

3、单选按钮(Radio Buttons)

使用<input type="radio">来定义表单单选按钮:

<form>

<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女

</form>

4、复选框(Checkbox)

使用<input type="checkbox">定义复选框,用户可在其中选取一个或多个

<form>

<input type="checkbox" name="student" value="一年级">一年级<br>

<input type="checkbox" name="student" value="二年级">二年级<br>

</from>

5、下拉单选列表

使用<select>定义一个下拉列表:

<form>

<select name="sex">

<option value="">请选择</option>

<option value="男">男</option>

<option value="女">女</option>

</select>

</form>

6、提交按钮(Submit Button)

<input type="submit">定义了提交按钮

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接受到的数据进行相关的处理。

<form action="html_form_action.php" method="get">

用户名:<input type="text" name="user">

<input type="submit" value="Submit">

</form>

总结以上知识点:实现以下内容

HTML基础学习第五篇(HTML表单与输入)-LMLPHP

代码如下 

<!DOCTYPE html>
<html>
     <head>
	    <meta charset="UTF-8">
	     <title>
		    小莫个人信息
		 </title>
	 </head>
	 <body>
	    <h1>请输入个人信息</h1>
		<form action="test-6-2.html" method="get">
		姓名
		<input type="text" name="name"><br>
		银行卡密码
		<input type="password" name="password"><br>
		性别
		<input type="radio" name="sex" value="男">男
		<input type="radio" name="sex" value="女">女
		<input type="radio" name="sex" value="人妖">人妖<br>
		是否单身
		<select name="single">
		    <option value="">请选择</option>
			<option value="单身">单身</option>
			<option value="不单身">不单身</option>
		</select><br>
		个人爱好
		<input type="checkbox" name="hobby1" value="唱歌">唱歌
		<input type="checkbox" name="hobby2" value="看书">看书
		<input type="checkbox" name="hobby3" value="刷视频">刷视频
		<input type="checkbox" name="hobby4" value="打游戏">打游戏
		<input type="checkbox" name="hobby5" value="干饭">干饭<br>

		<input type="submit" value="提交">
		</form>
	 </body>
</html>
09-15 12:31