HTML（五）_html多选框个人特长-优快云博客

1.09 表单的设计

一，表单标记

基本语法：

<form name=" " method=" " action=" " enctype=" " target=" "></form>

name:设置表单名称
method：设置表单发送的方法，可以是"post"或者"get"
action：设置表单处理方式
enctype：设置表单的编码方式
target：设置表单的显示目标

实例代码：
在这里插入图片描述
效果：

二，插入文本框< text>

基本语法：

<form><input name="text" type="text" maxlength=" " size=" " value=" "></form>

实例代码：
在这里插入图片描述
效果：

三，插入密码框< password>

基本语法：

<form><input name="password" type="password" maxlength=" " size=" " ></form>

实例代码：
在这里插入图片描述
效果：

四，插入文本域< file>

基本语法：
在这里插入图片描述
实例代码：

效果：

五，插入标准按钮< botton>

基本语法：

<form><input name="b1" type="button" value="标准按钮"></form>

实例代码：
在这里插入图片描述
效果：

六，插入提交按钮< submit>

基本语法：

<form><input name="submit" type="submit" value="提交"></form>

实例代码：
在这里插入图片描述
效果：

七，插入重置按钮< reset>

基本代码：

<form><input name="reset" type="reset" value="重置"></form>

实例代码：
在这里插入图片描述
效果：

在这里插入图片描述

八，插入单选框< radio>

基本语法：

<form><input name="r1" type="radio"checked value=" "></form>

实例代码：
在这里插入图片描述
效果：

九，插入复选框< checkbox>

基本语法：

<form><input name="r1" type="checkbox" checked value=" "></form>

实例代码：
在这里插入图片描述
效果：

十，插入文字域< textarea>

基本语法：

<form><textarea name="text" rows=" " cols=" " ></textarea>

rows：行数
cols：列数

实例代码：
在这里插入图片描述
效果：

十一，插入下拉列表< select>和列表项< option>

基本语法：
在这里插入图片描述
size：显示的选项数目
multiple：列表中的项目多选

实例代码：

<html>
  <head>
    <title>插入下拉菜单和列表</title>
  <head>
  <body>
<form>
请选择你喜欢的特长<br>
<select  name="特长" size=10 multiple>
<option  value="1">唱歌
<option  value="2">画画
<option  value="3">长跑
<option  value="4">游泳
<option  value="5">体操
<option  value="6">足球
<option  value="7">篮球
<option  value="8">羽毛球
<option  value="9">棒球
</select>
</form>
</body>
</html>

效果：
在这里插入图片描述