/* *作者：呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货，记得关注哦！ *vx：it_daimeng */
表单标签
表单: form:所有的表单元素都是放在form中提交到服务器端
属性: action:提交的页面地址
method:提交的方式
get:提交的内容都会通过url传递,不安全，传递的内容长度有限制
post:提交的内容会加密，通过正文传递，可以提交大量数据
表单元素:
1)输入框
《1》文本框：<input type="text" name="必须的" />
《2》密码框：<input type="password" name="必须的" />
《3》单选框：<input type="radio" name="必须的" />
注意：
同组的单选按钮名称(name) 必须相同，才能彼此互斥
《4》复选框：<input type="checkbox" />
《5》按钮 ：
普通按钮：<input type="button" />
重置按钮：<input type="reset" />
提交按钮：<input type="submit" />
图片按钮：<input type="image" src="图片的路径" />
注意： 默认有 表单提交功能的是 ： submit / image
《6》隐藏域：<input type="hidden" />
《7》上传文件：<input type="file" />
用户名:<input type="text" size="20" value="客户输入的值或者默认的值" /> 密码:<input type="password" value="123456" /> 性别:<input type="radio" name="sex" value="1" checked="checked" />男 <input type="radio" name="sex" value="2" />女 爱好:<input type="checkbox" value="1" checked="checked" />吃饭 <input type="checkbox" value="2" checked="checked" />睡觉 <input type="checkbox" value="3" />打豆豆 上传控件:<input type="file" /> 隐藏框:<input type="hidden" value="商品id" /> <input type="submit" value="注册" /> <input type="reset" value="取消" /> <input type="button" value="普通按钮" /> 图片提交按钮:<input type="image" src="img/27125326.jpg" />
2) 多行文本框
<textarea cols="列数目" rows="行数目" ></textarea>
留言:<textarea rows="4" cols="30"> </textarea>
- 下拉列表框
<select >
<option value="必须的">文本值</option>
</select>
你的密保问题:
<select>
<option value="1">请选择</option>
<option selected="selected" value="2">你的妈妈叫什么名字?</option>
<option value="3">你的爸爸叫什么名字?</option>
<option value="4">你最喜欢的电影?</option>
</select>
下拉列表框可以设置为多选:
<select multiple="multiple" size="3">
<option value="1">请选择</option>
<option selected="selected" value="2">你的妈妈叫什么名字?</option>
<option value="3">你的爸爸叫什么名字?</option>
<option value="4">你最喜欢的电影?</option>
</select>
4) HTML 5 中扩展的 表单标记
<1> <input type="tel" pattern="\d{8}" />
<2> <input type="email" />
<3> <input type="url" />
<4> <input type="color" />
<5> <input type="search" />
<6> <input type="number" />
<7> <input type="range" />
<8> <input type="date|time|datetime|month|week|datetime-local" />
<9><input type="text" list="data2" />
<datalist id="data2">
<option value="百度"></option>
<option value="谷歌"></option>
<option value="必应"></option>
</datalist>
颜色:<input type="color" /> 邮箱:<input type="email" /> 日期:<input type="date" /> 搜索:<input type="search" /> 提示框<input type="text" list="data" /> <datalist id="data"> <option>html5</option> <option>html4</option> </datalist>
5) HTML 5 中扩展的 表单标记 的属性
<1> 定义正则表达式： pattern="\d{8}"
<2> min="1" max="100" step="5"
<3> form="某个<form>标记的 ID属性" : 定义表单元素属于哪一个表单
<4> placeholder="请输入您的联系方式" : 文本框中的 默认的灰色提示信息，用户输入时会自动消失
<5> required="required" : 用来定义表单元素为【必填】项
电话:<input type="text" pattern="\d{11}" />
用户名:<input type="text" required="required" placeholder="请输入用户名" />
<input type="submit" name="注册" disabled="disabled" /> 标签：标签,文本框,表单,HTML,提交,按钮,讲师 From： https://www.cnblogs.com/daimenglaoshi/p/16631496.html