1、<form>标签
<form> 标签用于为用户输入创建 HTML 表单。
表单用于向服务器传输数据。
action属性,表示表单提交到哪里去。
2、form的子标签
form的每一个子标签都需要添加name属性。type为submit、button、reset之类的按钮除外。
(1)<input>标签
<input>为单独使用的标签,无结束标签。
<input> 标签规定了用户可以在其中输入数据的输入字段。
<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变,取决于 type 属性。
属性:
①type属性
②name属性
name属性一般与后台有关,name的值,在我们提交到后台以后,就会跟javabean的成员变量相通,例如<input type="text" name="username"> 在服务器端的javabean中也有个username成员变量,通过setter()跟getter()方法,来获取提交的html中name属性所对应的值。这个框里提交的值,就可以通过username的getter()方法进行获取。而获取到的值就是下面我们要学的value属性值,就类似于java中常说的key_value映射。所以,一般来说我们都要添加name属性。
name属性的另一个主要作用,就是在type的值为radio,也就是单选按钮时,那么要怎么控制只选中一个radio,这个分组就是根据相同的Name属性来实现的。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
请输入用户名:<input type="text" name="username"><br>
性别:<input type="radio" name="gender">male
<input type="radio" name="gender">female
</form>
</body>
</html>
这样我们在点击性别的时候就只能选择一个。如果不添加name属性,就会出现下面这种情况
有一篇关于name属性的详细用途的文章,可以了解一下:
https://blog.csdn.net/u013485543/article/details/39959291
③value属性
value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值,就类似于默认值,但是不同于placeholder属性的是,用在这里的value需要先删除再键入,所以更推荐用placeholder属性。
type="checkbox", "radio", "image" - 定义与输入相关联的值
<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
value 属性无法与 <input type="file"> 一同使用。
一般情况下,除了text,password,textarea之类的输入文本的属性之外,都需要value属性。
通过下面的例子,我们能更直观的看到name属性跟value属性的关系。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
请输入用户名:<input type="text" name="username" placeholder="输入您的姓名"><br>
性别:<input type="radio" name="gender" value="male">male
<input type="radio" name="gender" value="female">female<br>
<input type="checkbox" name="hobby" value="basketball">basketball<br>
<input type="checkbox" name="hobby" value="badminton">badminton<br>
<input type="checkbox" name="hobby" value="write_code">write_code<br>
<input type="submit" value="提交">
</form>
</body>
</html>
在我们输入内容并提交后,观察地址栏,会出现下面内容。
是不是很像一个个的键值对。这些提交的数据要通过后台处理,存储到数据库中。
④checked属性
在radio或者是CheckBox之类的选项按钮里,可以通过checked="checked"来定义默认选项。
性别:<input type="radio" name="gender" value="male" checked="checked">male
这段代码打开后就会出现默认选择male。
⑤requried属性
通过required="required"来规定该区域是必填的,否则无法提交。
(2)<select>标签
<select> 元素用来创建下拉列表。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
属性:
常用的主要是name属性,作用跟用法同上。
1️⃣<option>子标签
<option> 标签定义下拉列表中的一个选项(一个条目)。
<option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。
<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value 属性,此属性会指示出被送往服务器的内容。这一点是必须要注意的,因为你不加value同样可以实现,这样的效果,但是服务器找不到这个值,所以必须在option中添加value属性。
注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。
⭐⭐通过selected="selected"属性来规定默认选择的选项。这点跟radio跟text的都不同,radio的是checked,text的是placeholder。
<option value="上海" selected="selected">上海</option>
2️⃣<optgroup>子标签
如果列表选项很多,可以使用 <optgroup> 标签对相关选项进行组合。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。
label属性用于描述组合选项的内容。这个是必须有的。