• 表单


    表单

    form的action属性指定由谁来处理用户提交的表单

    form的method属性指定使用哪种http方法将表单发送给服务器,有get和post两种,这两种最明显的区别就是get方法会将提交的数据整合到url里,而post不会这样,post的提交会随http消息的主体发送到服务器。

    input就是加一个输入框。

    button是加一个按钮。

    <!DOCTYPE>
    <html>
    <head>
    
    </head>
    <body>
    	<form action=" " method="post">
    		名字:<input type="text" name="name"><br><br>
    		邮箱:<input type="text" name="email"><br><br>
    		<button type="submit">提交</button>
    	</form>
    </body>
    </html>
    

    自动填充:

    autocomplete属性,默认值为on,也就是会自动打开自动填充,form,input有这个属性。

    指定目标显示位置:

    form的target属性,指定响应表单的页面应该在哪显示,是在本页面,还是在新标签页。

    设置默认值:

    给输入框设置默认值,用value属性。

    自动聚焦:

    这个功能就是表单一加载出来,就把光标定到某个input的输入框里。需要autofocus属性

    禁用元素:

    disabled属性,使用后该输入框无法点击。button和input都可以用。

    禁止修改:

    input元素使用,使输入框内的内容无法修改。readonly

    label元素:

    没有视觉上的特殊效果,但可以提高用户的交互体验,在表单中,将文本和input用label包裹起来后,点击输入框前的文本也可以使光标进入到输入框,为隐式关联。

    <label>性别:<input type="text" name="sex" ></label><br><br>
    

    label元素有个for属性,它的值可以指定另一个元素的id属性值,id不能重复。然后这两个元素就可以关联起来。

    		<label for="sex111">性别:</label><input type="text" name="sex" id="sex111"><br><br>
    
    

    fieldset元素:

    将表单内的相关元素进行分组。

    <!DOCTYPE>
    <html>
    <head>
    
    </head>
    <body>
    	<form target="_blank" action=" " method="post" autocomplete="off">
    		<fieldset>
    			名字:<input type="text" name="name" ><br><br>
    			邮箱:<input type="text" name="email" ><br><br>
    		</fieldset>
    		<br>
    		<fieldset>
    			性别:<input type="text" name="sex" ><br><br>
    			等级:<input type="text" name="等级"><br><br>
    		</fieldset>
    		<button type="submit">提交</button>
    	</form>
    </body>
    </html>
    

    legend元素:

    用来给分组的input命名,legend元素必须作为fieldset的第一个子元素出现。

    <!DOCTYPE>
    <html>
    <head>
    
    </head>
    <body>
    	<form target="_blank" action=" " method="post" autocomplete="off">
    		<fieldset>
    			<legend>第一组信息</legend>
    			名字:<input type="text" name="name" ><br><br>
    			邮箱:<input type="text" name="email" ><br><br>
    		</fieldset>
    		<br>
    		<fieldset>
    			<legend>第二组信息</legend>
    			性别:<input type="text" name="sex" ><br><br>
    			等级:<input type="text" name="等级"><br><br>
    		</fieldset>
    		<button type="submit">提交</button>
    	</form>
    </body>
    </html>
    

    select元素和option元素:

    制作下拉选项框,option的value的值是给服务器发送的值。

    		<select>
    			<option value="male">男</option>
    			<option value=="female">女</option>
    		</select>
    

    optgroup元素:

    对下拉列表的选项进行分组

    <!DOCTYPE>
    <html>
    <head>
    
    </head>
    <body>
    	<p>你最喜欢的游戏角色是:</p>
    	<select>
    		<optgroup label="黑暗之魂中的">
    			<option>太阳骑士</option>
    			<option>洋葱骑士</option>
    			<option>灰心哥</option>
    			<option>半龙妹</option>
    		</optgroup>
    		<optgroup label="鬼泣中的">
    			<option>但丁</option>
    			<option>尼尔</option>
    			<option>维吉尔</option>
    			<option>V</option>
    		</optgroup>
    		<optgroup label="巫师中的">
    			<option>杰洛特</option>
    			<option>希里</option>
    			<option>维瑟米尔</option>
    		</optgroup>
    	</select>
    </body>
    </html>
    
  • 相关阅读:
    Python学习——列表
    第04组 Alpha冲刺(3/6)
    第04组 Alpha冲刺(2/6)
    第04组 Alpha冲刺(1/6)
    第04组 团队Git现场编程实战
    第04组 团队项目-需求分析报告
    团队项目-选题报告
    第二次结对编程作业
    第4组 团队展示
    第一次结对编程作业
  • 原文地址:https://www.cnblogs.com/fate-/p/14338213.html
Copyright © 2020-2023  润新知