HTML-基础表单篇

HTML-基础表单篇

表单标签

一个完整的表单，由表单域，表单空间（表单元素）和提示信息

如：

<form>
    账户名：<input type="text" name="username" value="请输入账户" maxlength="25"> <br>
	密码：<input type="password" name="userpassword" maxlength="25"> <br>
    性别：<label for="nan">男</label>
    	<input type="radio" id="nan" name="gender">
    	<label for="nv">--女</label>
		<input type="radio" id="nv" name="gender">
    	<label for="qita">--其他</label>
    	<input type="radio" id="qita" name="gender">
    	<label for="shenmi">--神秘</label>
    	<input type="radio" id="shenmi" name="gender" checked="checked"><br>
    爱好：打游戏  <input type="checkbox" name="hobby">--运动 <input type="checkbox" name="hobby">--旅游 <input type="checkbox" name="hobby">--逛街 <input type="checkbox" name="hobby">--古诗 <input type="checkbox" name="hobby">--其他 <input type="checkbox" name="hobby"> <br>
    手机号：<input type="text" name="username" value="请输入账户" maxlength="25">
    <input type="button" value="获取手机验证码"><br>
    <input type="submit" value="注册"><br>
    <input type="reset" value="重新填写">
	上传头像：<input type="file"><br>
</form>

显示效果：：：：w(ﾟДﾟ)w：：：：

表单域

在HTML中，<form>标签用于定义表单域，

<form>会把它范围内的表单元素信息提交给服务器

语法：

<form action="URL地址" method="提交方式" name="表单域名称">

常用属性

属性	属性值	描述
action	URL地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，以区分同一页面的多个表单域

表单控件（表单元素）

控件	效果
input	输入表单元素
select	下拉表单元素
textarea	文本域元素

<input>—输入

<input>用于收集信息

在<input>中，保护一个type数下，绝对输入字段的形式（文本，文本框，文本控件，按钮等)

语法：

<input type="属性值" />

type属性的属性值及描述如下：

属性值	描述	属性值	描述
button	定义可点击按钮（一般通过javaScript启动脚本）	password	定义密码字段
checkbox	定义复选框	radio	定义单选按钮
file	定义输入字段和“浏览”按钮。供文件上传	reset	定义重置按钮，会清空表单中的所有数据
hidden	定义隐藏的输入字段	submit	定义提交按钮，会吧表数据发送给服务器
imagr	定义图片形式的提交按钮	text	定一单行的输入字段，用户可输入文本，默认宽度20个字符

除了type属性外，<input>标签还有很多属性，常用属性：

属性	属性值	描述
name	由用户自定义	定义iuput元素名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1. name和value是每个表单元素都有的属性值，后台使用。
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值。

<label>标签

<label>标签是input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，点击<label>内的文本时，浏览器会自动将光标转到对应表单元素。

语法：

<lable for="one">one</label>
<input type="reddio" name="one" id="one"/>

<select>–下拉

如：

<select>
	<option>绳锯木断，水滴石穿。</option>
	<option>独学而无友，则孤陋而寡闻。</option>
    <option>愿得一心人，白头不相离。</option>
    <option>一日不见兮，思之如狂。</option>
</select>

效果：

语法：

<select>
	<option>1</option>
	<option>2</option>
	......
</select>

注意：

1. <select>中至少包含一对<option>
2. 在<option>中定义selected="selected",当前项是默认选中项

<textarea>–文本

<textarea>用于定义多行文本输入的控件

如：

<form align="center">
<textarea rows="8" cols="40" readonly="readonly" >
                          明日歌
           明日复明日，明日何其多。
           我生待明日，万事成蹉跎。
           世人若被明日累，春去秋来老将至。
           朝看水东流，暮看日西坠。
           百年明日能几何？请君听我明日歌。                        
</textarea>

效果：

语法：

<textarea rows="2" clos="25">
	文本介绍
</textarea>

基础表单篇结束–感谢观看！！！！！-----(oﾟvﾟ)ノ

本人学习心得总结—仅学习使用

本文作者：loker66fan