我的前端学习笔记（三）

接上个笔记[aru_41]（表单标签）

本节课所用演示代码点击运行可查看效果-单选框

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

       <title>上课</title>

</head>

<body>

<H2>

选择你最喜欢的水果

</H2>

<form method="get" action="">

1.苹果<input type="radio" name="fruit" value="apple">

2.橘子<input type="radio" name="fruit" value="orange">

3.香蕉<input type="radio" name="fruit" value="banana">
<br>
<input type="submit">


</form>

</body>

</html>

其中表单代码部分单独拿出来

<form method="get" action="地址">

1.苹果<input type="radio" name="fruit" value="apple">

2.橘子<input type="radio" name="fruit" value="orange">

3.香蕉<input type="radio" name="fruit" value="banana">

<input type="submit">

1.3表单组件复选框

要让单选变成多选，将radio替换成checkbox

下面假如你要利用表单标签做一个小项目

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

       <title>调查</title>

</head>

<body>

<H2>

您的性别是

</H2>

<form method="get" action="">

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

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

<br>
<input type="submit">




</form>

</body>

</html>

提高用户体验，让它提前默认选中一项，在你想要默认选中的那一项代码后面加checked=”checked”的属性，该属性在多选框同样适用。

如：

男<input type="radio" name="sex" value="male" checked=”checked”>

就是当用户未选择时默认选中项

表单组件-<select>下拉菜单

<select>

<option></option>

<option></option>

<option></option>

</select>

<select></select>是下拉菜单组件。中间的option是菜单项，比如常见的选择省份

同样关注两点，数据值，数据名,父子结构直接在上面写便好。

数据值option中间夹的就是值

<select name=”province”>

<option>beijing</option>

<option>shanghai</option>

<option>liaoning</option>

</select>

以上就是表单标签最常用的几个组件。

明天更新css