html中input、label、form、textarea、select

表单input：表单是用来收集信息的，由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值：

除以上属性外，input元素type属性还有一个number属性值，此为仅可以填数字，默认是可以选择或者填写任意数字，但是当type属性为number属性值时，可以使用max和min属性来限制数字的取值范围，input更多属性见HTML5

 <input type="number" min="0"> <!-- min属性限定最小值为0 -->

label标签：

label标签是为input标签服务的，用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点


    <label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label标签的for属性找input元素获得焦点 -->
    <input id="name" type="text"/>

表单域form：

form元素用于创建一个表单，form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮，如果form里面没有submit按钮，那么可以使用button中type属性为submit的button按钮，这个buttont按钮可能不在form表单中，此时可以给type属性值为submit的button添加form属性，值为form表单的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址，method属性设置提交方式，其属性值有post和get,name属性用来给表单域定义名字，用于区分表单域 -->
      姓名：<input type="text">
      年龄：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能显示一行内容，textarea元素可以显示多行，一般做留言效果使用，常常被称为富文本域。


     <!-- rows属性限定行数，当行数超过限定后会出现滚动条，cols属性限定的是列数，当超过限定后会换行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在实际开发中如果需要用到比较复杂的富文本域（类似word的，可以上传视频图片等功能）推荐使用第三方插件，这里推荐大家一款使用的富文本插件：UEditor,使用它可以在网页中实现类似word等编辑，如果想要了解更多及方法请查阅官方文档：http://fex.baidu.com/ueditor/，当然类似的富文本编辑器还有很多，如：CKeditor：https://ckeditor.com/等

富文本编辑器可以自己做，其原理是利用document的execCommand()方法，这个方法实际开发中很少用，已经废弃，所以一般很少有人了解，如果想要了解更多，可阅读官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->>
                <option value="">
                    测试1
                </option>
                <option value="">
                    测试2
                </option>
                <option value="">
                    测试3
                </option>
            </optgroup>
            <optgroup value="" label="分组2">
                <option value="">选项1</option> <!-- select默认选择第一个option，当给option加selected属性时，则会选中此项显示 -->
                <option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略，其效果不变-->
                <option value="">选项3</option>
            </optgroup>
          </select>
    </body>

块引用标签：

有的时候会引用名人名言等，此时建议使用引用标签，引用标签分为长引用和短引用两种，长引用标签效果是插入换行和外边距，短引用标签的效果是加上虚拟的引号。


    <blockquote>海上生明月，天涯共此时。</blockquote><!-- 长引用标签 -->
    
    <q>引号</q><!-- 段引用会给内容加上虚拟的引号，这个引号根本不存在。 -->

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

要：禁止input缓存，禁止select缓存

有时候，我们页面的输入框，我们再页面里输入内容后，并不保存，但是刷新页面会发现值为输入的页面，完全没有从新去从后台取值，这是怎么回事呢？如下：

雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

其实多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值，很简单，只需要价格属性即可：autocomplete=”off”。

例如上面例子，改为如下就不会缓存啦：

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

听说还有一种直接加在form表单里也可以，但是因为我已经很久没有用form表单提交数据啦，都是用ajax异步提交的，所以我就没有采取这种方法，也很简单的如下：

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

当然，没试过不知道行不行，应该是没问题的！

一、input标签

用法：<input type="表单类型" />

二、单行文本框text属性

举例：

<form method="post">
        文本内容：<input type="text" />
    </form>

效果

属性：

vlaue 设置文本框的默认值，也就是默认情况下的文本框

size 设置文本框的长度

maxlength 设置文本框最多可以输入的字符数

vlaue举例：

<form >
	文本内容：<input type="text" value="请输入"/>
</form>

size举例：

<form >
	文本内容：<input type="text" value="请输入" size="1"/><br />
	文本内容：<input type="text" value="请输入" size="5"/>
</form>

maxlength举例

<form >
	文本内容：<input type="text" value="请输入" size="1"/><br />
	文本内容：<input type="text" value="请输入" size="5" maxlength="5"/>
</form>

二、密码文本框password属性

属性同单行文本框，不同的是单行文本框可见，这个不可见

举例：

<form >
	账户：<input type="text" /><br />
	密码：<input type="password"/>
</form>

三、单选框radio属性

举例：

注意,name属性必须要一样，要不不能成为单选按钮，value属性也要写上，给后端看的

<form >	
	性别选择:<input type="radio" name="性别" value="男"/>男
	         <input type="radio" name="性别" value="女"/>女	
</form>

如果想要默认男，用checked属性，举例

<form >	
	性别选择:<input type="radio" name="性别" value="男" checked=""/>男
	         <input type="radio" name="性别" value="女"/>女	
</form>

四、复选框checkbox属性

属性同单选框，不同的是单选框能选择一个，复选框可以选择多个

语法：<input type="checkbox" name="组名" value="取值" />

举例：

<form >	
	月份选择:<input type="checkbox" name="mouth" value="1月"/>1月
	         <input type="checkbox" name="mouth" value="2月"/>2月         
	         <input type="checkbox" name="mouth" value="3月"/>3月
	         <input type="checkbox" name="mouth" value="4月"/>4月
	         <input type="checkbox" name="mouth" value="5月"/>5月
	         <input type="checkbox" name="mouth" value="6月"/>6月
	         <input type="checkbox" name="mouth" value="7月"/>7月
</form>

五、按钮

普通按钮button 提交按钮submit 重置按钮reset

语法：<input type="button" value="取值" />

举例：

<form >	
	月份选择:<input type="checkbox" name="mouth" value="1月"/>1月
	         <input type="checkbox" name="mouth" value="2月"/>2月         
	         <input type="checkbox" name="mouth" value="3月"/>3月
	         <input type="checkbox" name="mouth" value="4月"/>4月
	         <input type="checkbox" name="mouth" value="5月"/>5月
	         <input type="checkbox" name="mouth" value="6月"/>6月
	         <input type="checkbox" name="mouth" value="7月"/>7月
	         <input type="reset" value="重置">
</form>

3种按钮虽然从外观上看起来是一样的，但是实际功能却是不一样的。最后，我们总结一下普通按钮、提交按钮以及重置按钮的区别。

（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。

（2）提交按钮一般都是用来给服务器提交数据的（当前的form)。

(3）重置按钮一般用来清除用户在表单中输入的内容（当前的form)。

六、文件上传file

语法：<input type="file" />

在线咨询

上一篇：html基础必备-图像标记，前端小白一看就会
下一篇：国内的浏览器和国外浏览器相比都有哪些优势

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html中input、label、form、textarea、select

您的项目需求