• HTML表单控件


    form表单

    表单结构:通常要设置action,method,ID属性

    1.   action:该属性值是服务器上一个页面的URL,此页面是在用户提交表单时接受表单信息
    2.    method:采用get和post方法

          a) get:使用该属性时,表单中的值被附加在由action所指定的URL末尾,get方法适用于以下两种情形

              1.短表单(如搜索框);

              2.只从web服务器上检索数据的情形(不发送那些在数据库中要添加或删除的数据);

          b) post:使用该方法时,表单中的值被放在HTTP头自信自中进行发送。如果你的表单存在以下情况就用post方法

          1.允许用户上传文件

          2.非常长

          3.包含敏感信息(密码等)

          4.对数据库中的信息进行增删改查

    1.单行文本框

    	<form action="http://www.example.com/login.php">
    		<p>Username:
    			<input type="text" name="username" size="15" maxlength="30" />
    		</p>
    	</form>
    

    Username:

    2.密码框

    <html>
    	<head>
    		<title>Password Input</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/login.php">
    			<p>Username:`
    				<input type="text" name="username" size="15" maxlength="30" />
    			</p>
    			<p>Password:`
    				<input type="password" name="password" size="15" maxlength="30" />
    			</p>
    		</form>
    	</body>
    </html>
    
    Password Input

    Username:

    Password:

    3.文本域(多行文本框)

    <html>
    	<head>
    		<title>Textarea</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/comments.php">
    			<p>What did you think of this gig?</p>
    			<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
    		</form>
    	</body>
    </html>
    
    Textarea

    What did you think of this gig?

    4.单选按钮

    <html>
    	<head>
    		<title>Radio Button</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/profile.php">
    			<p>Please select your favorite genre:
    				<br />
    				<input type="radio" name="genre" value="rock" checked="checked" /> Rock
    				<input type="radio" name="genre" value="pop" /> Pop
    				<input type="radio" name="genre" value="jazz" /> Jazz
    			</p>
    		</form>
    	</body>
    </html>
    
    Radio Button

    Please select your favorite genre:
    Rock Pop Jazz

    5.复选按钮

    <html>
    	<head>
    		<title>Checkbox</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/profile.php">
    			<p>Please select your favorite music service(s):
    				<br />
    				<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
    				<input type="checkbox" name="service" value="lastfm" /> Last.fm
    				<input type="checkbox" name="service" value="spotify" /> Spotify
    			</p>
    		</form>
    	</body>
    </html>
    
    Checkbox

    Please select your favorite music service(s):
    iTunes Last.fm Spotify

    6.下拉菜单(下拉列表)

    <html>
    	<head>
    		<title>Drop Down List Box</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/profile.php">
    			<p>What device do you listen to music on?</p>
    			<select name="devices">
    				<option value="ipod">iPod</option>
    				<option value="radio">Radio</option>
    				<option value="computer">Computer</option>
    			</select>
    		</form>
    	</body>
    </html>
    
    Drop Down List Box

    What device do you listen to music on?

    7.多选框

    <html>
    	<head>
    		<title>Multiple Select Box</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/profile.php">
    			<p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
    			<select name="instruments" size="3" multiple="multiple">
    				<option value="guitar" selected="selected">Guitar</option>
    				<option value="drums">Drums</option>
    				<option value="keyboard" selected="selected">Keyboard</option>
    				<option value="bass">Bass</option>
    			</select>
    		</form>
    	</body>
    </html>
    
    Multiple Select Box

    Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)

    8.文件上传域

       <html>
    	<head>
    		<title>File Input Box</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/upload.php" method="post">
    			<p>Upload your song in MP3 format:</p>
    			<input type="file" name="user-song" /><br />
    			<input type="submit" value="Upload" />
    		</form>
    	</body>
      </html>
    
    File Input Box

    Upload your song in MP3 format:


    9.提交按钮

       <html>
    	<head>
    		<title>Submit Button</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/subscribe.php">
    			<p>Subscribe to our email list:</p>
    			<input type="text" name="email" />
    			<input type="submit" name="subscribe" value="Subscribe" />
    		</form>
    	</body>
    </html>
    
    Submit Button

    Subscribe to our email list:

    10.图像按钮

    <html>
    	<head>
    		<title>Image Button</title>
    	</head>
    	<body>
    		<form action="http://www.example.org/subscribe.php">
    			<p>Subscribe to our email list:</p> 
    			<input type="text" name="email" />
    			<input type="image" src="http://xiaozhuzhu77.qiniudn.com/subscribe.jpg" width="100" height="20" />
    		</form>
    	</body>
    </html>
    
    Image Button

    Subscribe to our email list:

    11.按钮和隐藏控件

    <html>
    	<head>
    		<title>Button and Hidden Controls</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/add.php">
    			<button><img src="http://xiaozhuzhu77.qiniudn.com/add.gif" alt="add" width="10" height="10" /> Add</button>
    			<input type="hidden" name="bookmark" value="lyrics" />
    		</form>
    	</body>
    </html>
    
    Button and Hidden Controls

    12.标签表单控件

    <html>
    	<head>
    		<title>Labelling Form Controls</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/subscribe.php">
    			<label>Age: <input type="text" name="age" /></label>
    			<br/ >
    			Gender:
    			<input id="female" type="radio" name="gender" value="f">
    			<label for="female">Female</label>
    			<input id="male" type="radio" name="gender" value="m">
    			<label for="male">Male</label>
    		</form>
    	</body>
    </html>
    
    Labelling Form Controls

    Gender:

    13. 组合表单元素

    <html>
    	<head>
    		<title>Grouping Form Elements</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/subscribe.php">  
    			<fieldset>
    				<legend>Contact details</legend>
    				<label>Email:<br /><input type="text" name="email" /></label><br />
    				<label>Mobile:<br /><input type="text" name="mobile" /></label><br />
    				<label>Telephone:<br /><input type="text" name="telephone" /></label>
    			</fieldset>
    		</form>
    	</body>
    </html>
    
    Grouping Form Elements
    Contact details

    HTML5:表单验证

    <html>
    	<head>
    		<title>HTML5 Form Validation</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/login/" method="post">
    			<label for="username">Username:</label>
    			<input type="text" name="username" required="required" /></title><br />
    			<label for="password">Password:</label>
    			<input type="password" name="password" required="required" />
    			<input type="submit" value="Submit" />
    		</form>
    	</body>
    </html>
    
    HTML5 Form Validation

    HTML5:日期控件

    <html>
    	<head>
    		<title>HTML5 Date Input</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/bookings/" method="post">
    			<label for="username">Departure date:</label>
    			<input type="date" name="depart" />
    			<input type="submit" value="Submit" />
    		</form>
    	</body>
    </html>
    
    HTML5 Date Input

    HTML5:电子邮件和URL输入控件

    <html>
    	<head>
    		<title>HTML5 Email Input</title>
    	</head>
    	<body>
    		<form action="http://www.example.org/subscribe.php"> 
    			<p>Please enter your email address:</p>
    			<input type="email" name="email" />
    			<input type="submit" value="Submit" />
    
           <form action="http://www.example.org/profile.php"> 
    			<p>Please enter your website address:</p>
    			<input type="url" name="website" />
    			<input type="submit" value="Submit" />
    		</form>
    		</form>
    	</body>
    </html>
    
    HTML5 Email Input

    Please enter your email address:

    Please enter your website address:

    HTML5:搜索输入控件

    <html>
    	<head>
    		<title>HTML5 Search Input</title>
    	</head>
    	<body>
    		<form action="http://www.example.org/search.php">
    			<p>Search:</p>
    			<input type="search" name="search" placeholder="Enter keyword"/>
    			<input type="submit" value="Search" />
    		</form>
    	</body>
    </html>
    
    HTML5 Search Input

    Search:

    表单整体示例

    <html>
    	<head>
    		<title>Forms</title>
    	</head>
    	<body>
    		<form action="http://www.example.com/review.php" method="get">
    			<fieldset>
    				<legend>Your Details:</legend>
    				<label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br />
    				<label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br />
    			</fieldset><br />
    			<fieldset>
    				<legend>Your Review:</legend>
    				<p>
    					<label for="hear-about">How did you hear about us?</label>
    					<select name="referrer" id="hear-about">
    						<option value="google">Google</option>
    						<option value="friend">Friend</option>
    						<option value="advert">Advert</option>
    						<option value="other">Other</option>
    					</select>
    				</p>
    				<p>
    					Would you visit again?<br />
    					<label><input type="radio" name="rating" value="yes" /> Yes</label>
    					<label><input type="radio" name="rating" value="no" /> No</label>
    					<label><input type="radio" name="rating" value="maybe" /> Maybe</label>
    				</p>
    				<p>
    					<label for="comments">Comments:</label><br />
    					<textarea rows="4" cols="40" id="comments"></textarea>
    				</p>
    				<label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br />
    				<input type="submit" value="Submit review" />
    			</fieldset>
    		</form>
    	</body>
    </html>
    
    Forms
    Your Details:


    Your Review:

    Would you visit again?



  • 相关阅读:
    CentOS安装rz\sz命令
    间隔线美化
    linuxバッチの環境変数の設定
    Base64编码
    百分号编码
    java四月份总结
    win10窗口修改 #强制窗口修改 #任意修改 #窗口
    spacedesk #踩坑 #displayoff
    pip安装出错 #代理网络问题 #anocanda
    Fdroid 开源foss市场 里面很多开源应用程序
  • 原文地址:https://www.cnblogs.com/xiaozhuzhu77/p/4157623.html
Copyright © 2020-2023  润新知