（1）一个简单的搜索表单

<!-- 请求与返回，提交与相应 -->
<form action="https://www.baidu.com/s" target="_self"><input type="text" name="wd"><button>去百度搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search" target="_blank"><input type="text" name="keyword"><button>去京东搜索</button>
</form>

观察上述两个表单，一个百度，一个京东，有部分不同，在于三个属性：action, target, name

其中，action 表示搜索网址；target 表示是否在新的页签打开；name 根据各个平台的规定；

（2）用户名密码表单

<form action="https://search.jd.com/search">账户：<input type="text" name="account" value="请输入用户名" maxlength="10"><br>密码：<input type="password" name="pwd" maxlength="8"><br><button>确认</button>
</form>

上述表单中：type 代表 input 属性；value 为预设值；maxlength 代表最长长度；

后期渲染交给CSS；

（3）单选与多选（复选）

<form action="https://search.jd.com/search">性别：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女<br>爱好：<input type="checkbox" name="hobby" value="smoke">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头<br><button>确定</button>
</form>

checked 代表默认选，即一打开页面时男这个选项已选；

（4）隐藏域

<input type="hidden" name="xxx" value="123">

（5）确认与重置

<!-- 第一种写法 -->
<input type="submit" value="确认">
<input type="reset" value="重置"><!-- 第二种写法 -->
<button type="submit">确认</button>
<button type="reset">重置</button>

（6）普通按钮 button

点击表单不提交，type=“button”

<button type="button">点击不提交</button>

（7）文本域与下拉框

<!-- 文本域 -->
<textarea name="other" cols="30" rows="3"></textarea><!-- 下拉框 -->
<select name="place"><option value="冀">河北</option><option value="京" selected>北京</option><option value="鲁">山东</option><option value="晋">山西</option><option value="粤">广东</option>
</select>

（8）禁用表单控件

<!-- 包含 disabled 的都为禁用，只要包含，则禁用 -->
<input disabled type="" name="" value="">xxx
<button disabled type=""></button>
<textarea disabled name="" cols="30" rows="3"></textarea>

（9）标签 label

label 效果使得点击 “男” 即可选中男选项，而不是必须点击 input 栏；

<input id="nan" type="radio" name="gender" value="male">
<label for="nan">男</label>
<input id="nv" type="radio" name="gender" value="female">
<label for="nv">女</label>

注意 label 中需要设定 for 与 input 中 id 建立联系；

（10）fieldset 与 legend

fieldset 可以为表达空间分组，legend 是分组的标题；

<form action="https://search.jd.com/search"><fieldset><legend>主要信息</legend>账户：<input type="text" name="account" value="请输入用户名" maxlength="10"><br>密码：<input type="password" name="pwd" maxlength="8"><br><button>确认</button>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<br>爱好：<input type="checkbox" name="hobby" value="smoke">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头</fieldset><fieldset><legend>附加信息</legend>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<br>爱好：<input type="checkbox" name="hobby" value="smoke">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头<textarea name="other" cols="30" rows="3"></textarea><select name="place"><option value="冀">河北</option><option value="京" selected>北京</option><option value="鲁">山东</option><option value="晋">山西</option><option value="粤">广东</option></select></fieldset><button>确定</button></form>

【HTML】P4 表单 form input 与 button 等相关推荐

HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
form表单之input标签
表单标签<form> 表单用于向服务器传输数据. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldse ...
DHTMLX 前端框架建立你的一个应用程序教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...
HTML超文本标记语言（八）——表单form
一.表单<form>标签及其属性 HTML表单用于收集用户输入.基本格式如下: <form>. form elements. </form> 表单元素指不同类型的i ...
Element-UI组件之表单Form
Element-UI组件之表单Form Radio 单选框基础用法禁用状态单选框组按钮样式带有边框 Checkbox 多选框基础用法禁用状态多选框组 indeterminate 状态 ...
HTML5~表单form总结
表单form总结本篇大概内容(form表单,输入标签input,textarea多行文本标签,label标记标签,select 列表标签 ,域标签fieldset) 1.表单form最基本的模式 & ...
第二次网页前端培训笔记（表单，INPUT及常用字符）
1.表单 form 2. INPUT <form action="#" method="get" id="myform" name=& ...
html表单对于网页目地,html - 表单form
一.表单功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
html5input链接跳转,HTML表单标签input标签的使用
表单标签是HTML使用中十分重要的标签,其中 input 为用户与程序信息交互提供交流界面,是不可忽视的重中之重. input 标签是单标签,一般使用格式为 ,而后可以在标签的括号内添加其他属性说明. ...

【HTML】P4 表单 form input 与 button 等

表单