表单介绍

最新推荐文章于 2023-03-16 22:24:38 发布

laohuchushan

最新推荐文章于 2023-03-16 22:24:38 发布

阅读量321

点赞数

分类专栏：前端

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

form：表单
form定义了一个表单，表示一起提交的数据。
属性：
    action：定义数据提交的位置(书提交到哪里)
    method：提交的方式，分为get/post。两者的不同将在后台处理中进行解释。
    id：给form定义一个唯一的ID值。
    name：给form定义一个名称。

label标签：用来辅助文本输入框，在点击label时可以直接进入文本框。
    属性：for-->填写具体的文本框的id值，点击此label时会鼠标会跳到对应ID的文本框中。

input；文本输入框，属于内联块(inline-block)标签。
          默认情况下输入框在点击时会有蓝色边框效果显示。
    属性：
        type：定义文档框的类别。
            text(默认值)：普通文本框。
            password：密码框，输入的内容均以点显示。
            radio：单选框。只有name相同的radio才能只选择一个。
            checkbox：复选框。只有name相同的checkbox才算是一组信息。
            file：上传文件。样式无法修改。
            submit：提交按钮。通过value来修改按钮的显示文字。
            reset：重置按钮。通过value来修改按钮的显示文字。
            button：普通按钮。通过value来修改按钮的显示文字。
        width：定义文本框的宽度。
        value：填写文本框的默认值。
        placeholder：文本框的占位提示信息，是html5的新属性。
在radio和checkbox中checked="checked"表示默认已经被选中。

修改placeholder样式：当修改文本框的字体颜色和大小等样式时无法修改placeholder的样式，
                    只能针对不同的浏览器来修改placeholder的样式。
谷歌浏览器：
::-webkit-input-placeholder{
    color:red;
}
火狐浏览器：
::-moz-placeholder{
    color:green;
}
IE浏览器(仅在IE10及以上版本可用)：
:-ms-input-placeholder{
    color: #9A32CD;
}

下拉框：select-->样式不好修改，以后通过js来实现。
多行文本输入框：textarea
    属性：
        cols-->定义文本框的宽度,也可以通过样式的width来调整。
        rows-->定义文本框的高度,也可以通过样式的height来调整。
    样式：
        outline:none--->点击时不出现蓝色边框效果。
        resize:none--->不可以随意调整大小。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<style>
			/*设置谷歌浏览器文本输入框的占位提示信息的样式*/
			::-webkit-input-placeholder{
				color:red;
			}
			/*设置火狐浏览器placeholder样式*/
			::-moz-placeholder{
				color:green;
			}
			/*设置IE浏览器placeholder样式，只在IE10及以上版本可用*/
			:-ms-input-placeholder{
				color: #9A32CD;
			}
			input{
				/*去除文本框点击时蓝色边框效果*/
				outline: none;
				width: 200px;
				/*设置文本框文字的颜色*/
				color:blue;
			}
			.sex,.ho{
				width: 20px;
			}
			textarea{
				outline: none;
				/*设置为不可调整多行文本框大小*/
				resize: none;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" id="form1" name="myform">
			<input type="text" placeholder="请输入用户名" /><br>
			<input type="password" /> <br>
			<input type="radio" id="man" class="sex" checked="checked" name="gender" />
				<label for="man">男</label>    
			<input type="radio" id="nv" class="sex" name="gender" />
				<label for="nv">女</label><br>
			<input type="checkbox" name="hobby" class="ho" />唱歌
			<input type="checkbox" name="hobby" class="ho" />跳舞
			<input type="checkbox" checked="checked" name="hobby" class="ho" />朗诵
			<input type="checkbox" name="hobby" class="ho" />表演 <br>
			<input type="file" /> <br>
			<input type="submit" value="提交吧" />
			<input type="reset" value="重新填写" />
			<input type="button" value="普通按钮" /><br>
			<select>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
				<option>深圳</option>
			</select>  <br>
			<textarea cols="50" rows="10"></textarea>
		</form>
	</body>
</html>

效果如下所示：

laohuchushan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单介绍

form：表单form定义了一个表单，表示一起提交的数据。属性： action：定义数据提交的位置(书提交到哪里) method：提交的方式，分为get/post。两者的不同将在后台处理中进行解释。 id：给form定义一个唯一的ID值。 name：给form定义一个名称。label标签：用来辅助文本输入框，在点击label时可以直接进入文本框。属性：for--&...
复制链接

扫一扫

专栏目录