HTML表单表单标签1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38230811/article/details/83062440

表单标签

在我们日常接触中只要在网站输入账号密码就能登录自己的账号,那么用户数据是怎么和服务器进行交互?答案就是使用HTML表单(form)把浏览者输入的数据传送到对应的服务器端,然后服务器端程序对表单传过来的数据进行处理。

 

定义一个表单的范围: <form></form>

   属性  action: 提交到的地址,默认提交到当前页面

 

输入项: 可以输入或者选择内容的部分  (一定要加上name属性 不然无法传值)

大部分输入项使用  <input  type=”输入项的类型”/>

普通输入项: <input  type=”text”/>

密码输入项: <input  type=”password”/>

单选输入项: <input  type=”radio”/>

name属性相同的在一起单项选择

复选输入项: <input  type=”checkbox”/>

name属性相同的在一起多项选择

文件输入项(在后面上传的时候用到)<input type=”file”/>

 

下来输入项(不在input标签里面)

      <select name=”birth>

<option value=”1991”>1991</option>

<option value=”1992”>1992</option>

<option value=”1993”>1993</option>

      </select>

 

文本域

<textarea  cols=”10”   row”10”></textarea>

 

隐藏项(不会显示在页面上,但是存在于html代码里面)

 <input type=”hidden”/>

提交按钮

 <input type=”submit”/  value=”登入”>

 

例子

 
 <html>

 <form action="01.html">
 
    用户名:<input name="uname" type="text" maxlength="16"></input>只能输入字母或数字,4-16个字符<br/>
    密 码 :<input name="upass" type="password" maxlength="12"></input>密码长度6-12位<br/>
    确认密码:<input name="upass2" type="password" maxlength="12"></input>
    性 别 :<input type="radio" name="sex" value="m" checked="checked">男</input><input type="radio" name="sex" value="w">女</input><br/>
    爱好:<input type="checkbox" name="love" value="Y"/>羽毛球
	     <input type="checkbox" name="love" value="W"/>网球
         <input type="checkbox" name="love" value="Z"/>足球<br/>
	电子邮件地址:<input name="email" type="text"></input>输入正确的Email地址<br/>
    出生日期:
    <input name="year" type="text"></input>
    <select name="month" id="months">
	    <option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
	</select>月
	<select name="day" id="days">
	  	<option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
	</select>日<br/>
    自我描述:<textarea cols="10" rows="10" name="tex"></textarea><br/>
	隐藏项:<input type=”hidden” name="hid" /><br/>
    <input type="submit" value="同意以下协议条款并提交"></input><br/>

 </form>

  </html>

当点击提交后

 当前表单的地址栏出现变化,由于表单属性 action 指定跳转地址为 01.html 

于是表单数据传递到了01.html  并且地址栏显示格式如下

file:///C:/Users/hp/Desktop/01.html?uname=12&upass=12&upass2=12&sex=m&love=Y&email=12&year=12&month=%A1%B11%A1%B1&day=%A1%B11%A1%B1&tex=1223&hid=123

猜你喜欢

转载自blog.csdn.net/qq_38230811/article/details/83062440
今日推荐