笔记:html form表单相关

form表单标签,与用户进行交互

基本表单控件:文本框、文本域、单选框、复选框、按钮。都必须放在<form>..</form>中

<form method="post" action="save.php">
</form>

method:数据传送的方式。 action:输入数据被传送到的地方。

1、小例子:

<p>一个简单的表单应用,包含单选框、复选框、下拉选项</p>
<form method="post" action="save.php">					
<label> 用户名:</label>					
<input type="text" id="username" name="myname"/>					
<label >密码:</label>					
<input type="password" name="password"/><br/>					
<label>性别:</label>					
<input type="radio" value="women" name="sex" >女</input>					
<input type="radio" value="man" name="sex">男</input>					
<br/>					
<label>爱好:</label>					
<input type="checkbox" name="checkbox1" value="读书">读书</input>					
<input type="checkbox" name="checkbox2" value="美术" checked="checked">美术</input>					
<input type="checkbox" name="checkbox3" value="音乐" checked="checked">音乐</input>					
<input type="checkbox" name="checkbox1" value="跑步">跑步</input>	<br/>				
<label>城市:</label>					
<select>					
  <option value="上海">上海</option>					
  <option value="北京">北京</option>					
  <option value="深圳" selected="selected">深圳</option>					
  <option value="苏州">苏州</option>
</select><br/>
 <label>职业:</label>
 <select multiple="multiple">
   <option value="文员">文员</option>					
   <option value="工程师" selected="selected">工程师</option>					
   <option value="教师" selected="selected">教师</option>					
   <option value="程序员">程序员</option>
 </select><br/>
  你对什么感兴趣?
  <label for="run">慢跑</label>
    <input type="checkbox" id="run" name="慢跑"/>
  <label for="dengshan">登山</label>
    <input type="checkbox" id="dengshan" name="登山"/>
  <label for="lanqiu">蓝球</label>
    <input type="checkbox" id="lanqiu" name="篮球"/><br/>
  <label>性别:</label>
  <label for="female">女</label>          
 <input type="radio" id="female" name="sex" />   
 <label for="male">男</label>     
 <input type="radio" id="male"  name="sex"/></form>

2、效果图:

漏掉的文本域,支持多行文本输入:

<textarea cols="列数" rows="行数">文本内容</textarea>

3、在学习的时候出现的错误点

     I、 实现单选框的2种方式(复选框同样适用):

       a.

<label>性别:</label>
<input type="radio" name="sex" value="woman">女<input>
<input type="radio" name="sex" value="man">男</input>

     b.

<label>性别:</label>
<label for="female">女</label>
<input type="radio" id="female" name="sex"/>
<label for="male">男</label>
<input type="radio" id="male" name="sex"/>

*****注意*****

    不管是以上那种方式来实现单选框,同一组的单选按钮name值一定要相同,才能实现单选功能。

    注意两种方式的区别,不要混淆。

    第二种方法采用的是 label的for 属性: 

<label for="控件id名称">

            **注意**标签for属性的值应当与相关控件的id属性值相同。

  II、下拉列表框中实现多选

<select multiple="multiple">...</select>

III、提交、重置按钮

<input type="submit" value="提交" name="submitbotton"/>
<input type="reset" value="重置" name="resetbotton"/>






猜你喜欢

转载自blog.csdn.net/strive_wsy/article/details/80048840
今日推荐